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INTRODUCCIÓN 

Para comenzar 


Dreamweaver es un editor visual profesional para la creación y administración de 
sitios y páginas Web. Con Dreamweaver resulta fácil crear y editar páginas 
compatibles con cualquier explorador y plataforma. 

Dreamweaver proporciona herramientas avanzadas de diseño y formateo, y facilita 
el uso de funciones de HTML dinámico, como capas y comportamientos 
animados, sin necesidad de escribir una sola línea de código. El establecimiento 
de destino de exploradores comprueba el trabajo para averiguar si hay problemas 
potenciales en las plataformas y los exploradores más habituales. La tecnología 
Roundtrip HTML de Macromedia importa documentos HTML sin necesidad de 
cambiar el formato del código y, además, es posible configurar Dreamweaver para 
limpiar y cambiar el formato HTML cuando lo desee. 

Dreamweaver se puede personalizar totalmente. Puede crear sus propios objetos y 
comandos, modificar menús y métodos abreviados de teclado, e incluso escribir 
código JavaScript para ampliar las posibilidades que ofrece Dreamweaver con 
nuevos comportamientos e inspectores de propiedades. 
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Requisitos del sistema 

Para ejecutar Dreamweaver es preciso disponer del hardware y el software 

siguientes. 

Para Microsoft Windows: 

• Un procesador Intel Pentium o equivalente de 120 MHz o más que ejecute 
Windows 95, Windows 98 o Windows NT versión 4.0 o posterior. 

• 32 MB de memoria de acceso aleatorio (RAM), además de 20 MB de espacio 
libre en el disco duro. 

• Un monitor en color con capacidad para mostrar una resolución de 800 x 600 
píxeles. 

• Una unidad de CD-ROM. 

Para Macintosh: 

• Un Power Macintosh con Mac OS 8.1 o posterior. 

• 32 MB de memoria de acceso aleatorio (RAM), además de 20 MB de espacio 
libre en el disco duro. 

• Un monitor en color con capacidad para mostrar una resolución de 800 x 600 
píxeles. 

• Una unidad de CD-ROM. 


Instalar Dreamweaver 

Siga estos pasos para instalar Dreamweaver en un sistema Windows o Macintosh. 

Para instalar Dreamweaver: 

1 Introduzca el CD de Dreamweaver en la unidad de CD-ROM del ordenador. 

2 Dispone de las opciones siguientes: 

• En Windows, elija Inicio > Ejecutar. Haga clic en Examinar y elija el archivo 
Setup.exe del CD de Dreamweaver. En el cuadro de diálogo Ejecutar haga clic 
en Aceptar para comenzar la instalación. 

• En Macintosh, haga doble clic en el icono del instalador de Dreamweaver. 

3 Siga las instrucciones que aparecen en pantalla. 

4 Si el sistema lo solicita, reinicie el ordenador. 
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Aprendizaje de Dreamweaver 

El paquete de Dreamweaver contiene diversos recursos que le ayudarán a conocer 
el programa rápidamente y a lograr un buen manejo de éste para crear sus propias 
páginas y sitios Web. Entre dichos materiales figuran las páginas de ayuda HTML 
en línea que aparecen en el explorador, las películas Show Me, un curso práctico y 
un manual impreso. Además, el sitio Web de Dreamweaver se actualiza 
periódicamente. 


Visita guiada y películas Show Me 

Las películas Show Me de la Ayuda de Dreamweaver proporcionan una 
introducción con animación a algunas de principales funciones de Dreamweaver. 
La visita guiada incluye todas las películas Show Me por orden. 

También puede ver películas Show Me concretas en sus correspondientes secciones 
introductorias. En la tabla de contenido de la Ayuda, el icono siguiente indica que 
un tema contiene una película Show Me: 



Las películas Show Me requieren el plug-in Shockwave, que se suministra en el 
CD de Dreamweaver. Si adquirió su copia de Dreamweaver electrónicamente, 
puede descargar el plug-in Shockwave más reciente del sitio Web de Macromedia, 
en la dirección http://www.macromedia.com/shockwave/download/. 


Ayuda de Dreamweaver 

Las páginas de Ayuda HTML de Dreamweaver proporcionan información 
completa sobre todas las funciones de Dreamweaver. Se recomienda 
encarecidamente el uso de estos exploradores para ver la Ayuda de Dreamweaver: 

• En Windows: Netscape Navigator 4.0 y versiones posteriores o Microsoft 
Internet Explorer 4.0 y versiones posteriores. 

• En Macintosh: Netscape Navigator 4.0 y versiones posteriores (no 
recomendamos el uso de Internet Explorer para Macintosh debido a que no 
permite reproducir las películas Show Me.) 

Si utiliza un explorador 3.0, podrá acceder a todo el contenido, pero no a algunas 
funciones (como Buscar, por ejemplo). 

La Ayuda de Dreamweaver hace un amplio uso de JavaScript. Asegúrese de que 
JavaScript está activado en su explorador. Si tiene intención de usar la función de 
búsqueda, asegúrese de que también está activado Java. 


Para comenzar 
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La Ayuda de Dreamweaver incluye los componentes siguientes: 

Tabla de contenido Permite ver toda la información organizada por temas. Haga 
clic en las entradas de nivel superior para ver otros temas subordinados. 

índice Al igual que un índice impreso, sirve para localizar términos importantes o 
para acceder a temas relacionados. 

Buscar Permite localizar cualquier cadena de caracteres en todos los temas. La 
función de búsqueda requiere un explorador 4.0 con Java activado. 

Nota: Después de hacer clic en Buscar, puede aparecer una ventana de seguridad de Java 
solicitando permiso para leer los archivos del disco duro. Deberá conceder este permiso para 
que funcione la búsqueda. La applet no escribe en el disco duro ni lee archivos fuera de las 
páginas de Ayuda HTML. 

• Para buscar una frase, sencillamente escríbala en el campo de texto. 



• Para buscar archivos que contengan dos palabras clave (por ejemplo, capas y 
estilos), separe los términos de la búsqueda con un signo más (+). 



Ayuda contextual Proporciona un botón de Ayuda en cada cuadro de diálogo o un 
icono de signo de interrogación en los inspectores, las ventanas y las paletas para 
abrir el tema de Ayuda correspondiente. 


Haga clic aquí para abrir la Ayuda. 


Formato | Ninguno 
Vínculo! 


t 11 Fuente predel. ^7] Tam |Ning. -r | |~^| [ 
Des,r- 


LÜÜ í 
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Barra de exploración de la Ayuda de Dreamweaver Proporciona botones en los que 

puede hacer clic para pasar de un tema a otro. Los botones Anterior y Siguiente 
permiten acceder al tema anterior o siguiente de una sección (siguiendo el orden 
de los temas establecido en el contenido). 

O o 

Curso práctico de Dreamweaver 

El curso práctico de Dreamweaver es el punto de comienzo más indicado para 
aquellas personas que no tengan mucha experiencia en el desarrollo de sitios Web. 
Con este curso práctico aprenderá a editar un sitio Web de ejemplo con algunas de 
las funciones más útiles y potentes de Dreamweaver. El curso práctico se incluye 
tanto en la Ayuda de Dreamweaver como en el Usando Dreamweaver impreso. 

Manual del usuario de Dreamweaver (libro impreso) 

El Usando Dreamweaver ofrece una alternativa impresa a la Ayuda de 
Dreamweaver. Algunos temas de consulta sobre opciones del programa no se 
incluyen en el libro impreso. Consulte las páginas de Ayuda para obtener 
información sobre dichos temas. 


Manual Ampliación de Dreamweaver 

El manual Ampliación de Dreamweaver y las páginas de Ayuda proporcionan 
información para desarrolladores de JavaScript y C sobre el modelo de objetos de 
documento y las API (interfaces de programación de aplicaciones) de 
Dreamweaver, que permiten crear objetos, comandos, inspectores de propiedades, 
comportamientos y traductores. 

Centro de servicio técnico de Dreamweaver 

El sitio Web Centro de servicio técnico de Dreamweaver se actualiza de forma 
periódica con la información más reciente sobre el programa, así como con 
sugerencias de usuarios expertos, información sobre temas avanzados, ejemplos, 
trucos y actualizaciones. Visite este sitio Web con frecuencia para conocer las 
últimas noticias sobre Dreamweaver y aprender a sacarle el máximo provecho del 
programa, http://www.macromedia.com/support/dreamweaver/ 
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Por dónde empezar 

Esta guía contiene información para usuarios de distintos niveles. Para sacarle el 
máximo provecho a la documentación, comience leyendo las partes que sean más 
relevantes para su nivel de experiencia. 

Para usuarios sin experiencia en HTML: 

1 Para empezar, realice la visita guiada. 

2 A continuación siga las indicaciones del curso práctico de Dreamweaver. 

3 Continúe con “Aspectos básicos de Dreamweaver”, en la página 63, “Crear 
sitios y documentos”, en la página 75, “Crear vínculos y explorar”, en la 
página 109 y “Administrar sitios”, en la página 139. 

4 Para obtener información sobre la aplicación de formato al texto y la inserción 
de imágenes en las páginas, lea “Aplicar formato al texto”, en la página 177 y 
“Insertar imágenes”, en la página 199. 

Eso es todo lo que necesita para comenzar a crear sitios Web de gran calidad. 
Cuando esté preparado para aprender a utilizar herramientas más avanzadas de 
diseño e interacción, podrá continuar con el resto del manual. Quizá le resulte 
conveniente omitir el capítulo “Personalizar Dreamweaver”, al menos al principio. 


Para diseñadores de sitios Web con experiencia que empiezan a usar 

Dreamweaver: 

1 Para empezar, siga el curso práctico de Dreamweaver, en el que aprenderá los 
aspectos básicos de uso del programa. 

2 Lea “Aspectos básicos de Dreamweaver”, en la página 63 para obtener más 
información general sobre el interfaz de usuario de Dreamweaver. 

3 Aunque probablemente le resulte familiar gran parte del material de “Crear 
sitios y documentos”, en la página 75 y “Crear vínculos y explorar”, en la 
página 109, lea por encima esos capítulos para ver cómo se aplican en 
Dreamweaver estos conceptos conocidos, en especial “Crear un sitio local”, en 
la página 78. A continuación, lea “Administrar sitios”, en la página 139. 

4 “Aplicar formato al texto”, en la página 1 77 y “Insertar imágenes”, en la 
página 199 ofrecen información útil sobre el uso de Dreamweaver para crear 
páginas HTML básicas. 

5 Lea la introducción que aparece al comienzo de cada capítulo para determinar 
si le interesan los temas que se abordan en él. 
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Para diseñadores de sitios Web con experiencia en el uso de Dreamweaver 2: 

1 Para empezar, lea “Novedades de Dreamweaver 3”, en la página 16. Siga en esa 
sección las referencias a las secciones que abordan las funciones nuevas de 
Dreamweaver. No olvide leer las secciones sobre funciones nuevas e 
importantes: 

• “Paleta de marcador”, en la página 97 

• “Editar una etiqueta HTML en la ventana de documento”, en la página 338 

• “Aplicar formato al texto usando estilos HTML”, en la página 184 

• “Sincronizar los archivos de los sitios locales y remotos”, en la página 154 

• “Design Notes”, en la página 172 

• “Limpiar HTML de Microsoft Word”, en la página 350 

2 Conviene leer por encima “Aspectos básicos de Dreamweaver”, en la página 63 
para conocer los nuevos aspectos del interfaz de usuario de Dreamweaver. 

3 Además, si está interesado en personalizar y ampliar Dreamweaver, lea 
“Personalizar Dreamweaver”, en la página 387. 


Convenciones tipográficas 

En esta guía se utilizan las convenciones tipográficas siguientes: 

• Fuente de código Indica nombres de etiquetas y atributos HTML, así como el 
texto literal empleado en los ejemplos. 

• Fuente de código en cursiva Indica elementos reemplazables (también 
denominados metasímbolos) en el código. 

• Texto Román en negrita Indica el texto que se debe introducir literalmente. 
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Novedades de Dreamweaver 3 


Las nuevas funciones de Dreamweaver 3 ofrecen mejoras en la edición de HTML 
y la gestión de sitios; permiten agregar elementos como caracteres especiales, 
barras de exploración y mapas de imagen; optimizan el flujo de trabajo, y 
permiten personalizar y ampliar Dreamweaver. 

Editar HTML 

Quick Tag Editor Permite modificar, agregar o eliminar rápidamente una etiqueta 
HTML sin salir de la ventana de documento. Consulte “Editar una etiqueta 
HTML en la ventana de documento”, en la página 338. 

Estilos HTML Permiten definir estilos utilizando formato de caracteres HTML 
normalizado para distintos exploradores (como las etiquetas B y FONT) en lugar de 
hojas de estilos en cascada. La paleta de estilos de Dreamweaver 2.0 se denomina 
ahora paleta de estilos CSS. Consulte “Aplicar formato al texto usando estilos 
HTML”, en la página 184. 

Nuevo inspector de código fuente HTML Permite mostrar números de línea, 
seleccionar líneas de código completas desde el margen y arrastrar y colocar 
selecciones de HTML. También puede acoplar el inspector de código fuente 
HTML con otras paletas flotantes. Consulte “Utilizar el inspector de código 
Fuente HTML”, en la página 336. 

Nuevo modelo de etiquetas de terceros Permite indicar a Dreamweaver que 
ignore el contenido de algunos tipos de etiquetas de terceros, como las etiquetas 
Microsoft Active Server Pages (ASP) y ColdFusion. Puede agregar fácilmente 
soporte para otras etiquetas de terceros. Asimismo, las nuevas opciones de 
reescritura de HTML permiten controlar si Dreamweaver codifica algunos 
caracteres en determinados contextos. Consulte “Configurar preferencias de 
reescritura de HTML”, en la página 344 y “Evitar la reescritura de etiquetas de 
terceros”, en la página 410. 

Agregar/Quitar reparación de cambio de tamaño de Netscape Permite agregar 
automáticamente JavaScript para solucionar problemas con capas CSS cuando se 
cambia el tamaño de la ventana de un explorador. Consulte “Configurar 
preferencias de capa”, en la página 239. 
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Administrar sitios 

Sincronizar archivos Permite sincronizar rápidamente la copia local de un sitio con 
la versión del servidor, lo que garantiza que la última versión de cada archivo se 
encuentra en los sitios local y remoto. También puede configurar esta función para 
que borre archivos sobrantes. Consulte “Sincronizar los archivos de los sitios 
locales y remotos”, en la página 154. 

Acceso sencillo a la desprotección y protección de archivos Permite obtener, 
colocar, desproteger y proteger archivos directamente desde cualquier ventana de 
documento. Consulte “Usar el sistema de desprotección/protección”, en la 
página 148. 

Guardar archivos antes de colocar Le pregunta si desea guardar los archivos no 
guardados antes de transferirlos al servidor remoto. Consulte “Configurar 
preferencias de FTP del sitio”, en la página 146. 

URL en archivos de película Flash Ahora se pueden editar en Dreamweaver. El 
mapa del sitio muestra todos los vínculos de los archivos Flash y el verificador de 
vínculos puede comprobarlos. 

Crear y editar objetos y elementos de página 

Objetos de caracteres Proporcionan un conjunto de caracteres especiales y 
símbolos de uso frecuente (como ©, ® y ™) a los que se puede acceder fácilmente 
desde la paleta de objetos. Consulte “Usar la paleta de objetos”, en la página 70. 

Objetos de marcos Permiten crear de forma rápida y sencilla conjuntos de marcos 
predefinidos. Consulte “Insertar un conjunto de marcos predefinido”, en la 
página 267. 

Otros objetos Permiten agregar fácilmente barras de exploración, menús de salto, 
vínculos de correo electrónico, fechas y nuevos objetos de medios (como películas 
Flash 4 y Shockwave 7 y objetos Generator) a los documentos. Consulte “Usar la 
paleta de objetos”, en la página 70, “Crear vínculos y explorar”, en la página 109 y 
“Insertar medios”, en la página 281. 

Mapas de imágenes en línea Permiten agregar y cambiar de tamaño zonas 
interactivas, cambiar vínculos y destinos y aplicar comportamientos sin necesidad 
de salir de la ventana de documento. Consulte “Crear mapas sensibles”, en la 
página 210. 
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Optimizar el flujo de trabajo: Integración y comunicación 

Design Notes Permiten adjuntar notas a un archivo de modo que pueda realizar un 
seguimiento de sus cambios e informar sobre cuestiones de diseño a otros 
miembros del equipo. Puede incluso agregar Design Notes a imágenes en 
Fireworks y, a continuación, leer y editar dichas notas en Dreamweaver. Consulte 
“Design Notes”, en la página 172. 

Importar y limpiar HTML de Word Permite importar archivos HTML generados 
por Microsoft Word. La función de limpieza quita todo el código y los estilos 
XML irrelevantes, elimina etiquetas propietarias, arregla el HTML no válido y 
formatea el código de acuerdo con las preferencias del usuario. Consulte “Limpiar 
HTML de Microsoft Word”, en la página 350. 

Paleta de marcador Realiza un seguimiento de todas las acciones realizadas. 
Permite deshacer, repetir y copiar pasos en el Portapapeles y pegarlos para repetir 
acciones en otros documentos. Incluso puede guardar los pasos como un comando 
que aparece automáticamente en el menú Comandos. Consulte “Paleta de 
marcador”, en la página 97. 

Repetir Sirve para llevar a cabo rápidamente tareas repetitivas. Consulte “Repetir 
pasos”, en la página 99. 

Importar datos de tablas Permite crear tablas automáticamente a partir de datos 
que se han exportado a archivos delimitados desde aplicaciones como Microsoft 
Excel o Microsoft Access. Consulte “Importar datos de una tabla”, en la 
página 218. 

Insertar HTML de Fireworks Importa el código origen HTML y las imágenes que se 
obtienen al dividir una imagen con Fireworks. Puede iniciar Macromedia 
Fireworks desde Dreamweaver y editar una imagen PNG de origen. Consulte 
“Trabajar con archivos HTML de Fireworks”, en la página 209. 

Iniciar y editar medios Al hacer doble clic en una imagen o archivo de medios en la 
ventana Sitio, se abrirá el archivo en el editor externo correspondiente. Consulte 
“Usar un editor de imágenes externo”, en la página 205. 

Mayor compatibilidad con Macintosh Mejora el uso del programa en ordenadores 
Macintosh. Dreamweaver es compatible ahora con Navigation Services, genera 
imágenes utilizando QuickTime y ofrece diversas mejoras. 


Personalizar y ampliar Dreamweaver 

Personalizar menús y métodos abreviados Permite editar, personalizar y ampliar 
los menús y métodos abreviados de Dreamweaver. Consulte “Personalizar menús 
de Dreamweaver”, en la página 391. 

Ampliación de Dreamweaver Proporciona 300 funciones API nuevas que permiten 
crear extensiones JavaScript propias para Dreamweaver, incluidas las paletas 
flotantes personalizadas y los traductores de atributos. Consulte el manual 
Ampliación de Dreamweaver. 
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Recursos técnicos HTML y Web 

A continuación se indican algunos recursos útiles disponibles en la Web: 

Especificación HTML 4.0 (http://www.w3.org/TR/REC-html40/) Es la 
especificación oficial del World Wide Web Consortium para HTML. 

Especificación de hojas de estilos en cascada nivel 1 (CSS1) (http://www.w3.org/ 
TR/REC-CSS1) Es la especificación oficial para hojas de estilos del World Wide 
Web Consortium. 

Index DOT Html (http://www.blooberry.com/indexdot/html/) Se trata de una 
amplia lista de etiquetas, atributos y valores HTML e indica la compatibilidad que 
ofrecen con distintos exploradores. 

Guía de referencia de hojas de estilos de Web Review (http://webreview.com/ 
guides/style/) Explica qué son los estilos y en qué exploradores funcionan. 

"CGI Scripts for Fun and Profit" (http://www.hotwired.com/webmonkey/99/26/ 
index4a.html?tw=programming) Este artículo del sitio Hotwired 
Webmonkey trata sobre la incorporación de secuencias de comandos CGI 
(Common Gateway Interface) prefabricadas a las páginas. 

The CGI Resource Index (http://www.cgi-resources.com/) Base de datos sobre todos 
los aspectos relativos a CGI, como secuencias de comandos prefabricadas, 
documentación, libros e incluso contratación de programadores. 

Sitio de Common Gateway Interface (http://hoohoo.ncsa.uiuc.edu/cgi/) Contiene 
una introducción a CGI. 

Tabla de entidades (http://www.bbsinc.com/iso8859.html) Ofrece una relación 
de los nombres de entidades empleados en ISO 8859-1 (Latin-1). 

Página de eventos dinámicos HTML (http://msdn.microsoft.com/workshop/ 
author/dhtml/reference/events.asp#om40_event) Proporciona información sobre 
eventos de Microsoft Internet Explorer. 

Páginas de introducción a Microsoft ASP (http://msdn.microsoft.com/workshop/ 
server/asp/ASPover.asp) Proporciona información sobre Active Server Pages 
(ASP). 

Página Sun JSP (http://java.sun.com/products/jsp/) Proporciona información 
sobre JavaServer Pages (JSP). 

Páginas PHP (http://www.php.net/) Ofrecen información sobre PHP: Hypertext 
Preprocessor (PHP) 

Página de productos Allaire Coid Fusión (http://www.coldfusion.com/Products/ 
ColdFusion/) Ofrece información sobre ColdFusion. 

Sitio XML.com (http://www.xml.com) Proporciona información sobre XML. 
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CAPÍTULO 1 

Curso práctico de Dreamweaver 


En este curso práctico se explica cómo usar Dreamweaver para definir un sitio 
local y crear y editar documentos Web. Utilícelo para adquirir los conocimientos 
básicos que necesitará a la hora de desarrollar un sitio Web y familiarizarse con las 
nuevas capacidades de Dreamweaver 3. 

En este curso creará un sitio Web para una compañía ficticia, Scaal Coffee, 
dedicada a la comercialización de cafés selectos. 

Mientras visitan el sitio Web de Scaal, los clientes podrán leer acerca de la 
compañía, ver sus ofertas especiales de la semana y hojear las páginas de su 
catálogo en línea. 
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A lo largo del curso, aprenderá a realizar las siguientes tareas: 

• Definir un sitio local 

• Crear un documento 

• Utilizar capas para diseñar una página 

• Convertir capas en tablas 

• Adjuntar un comportamiento a una imagen 

• Importar un documento HTML de Microsoft Word 

• Aplicar formato al texto usando estilos HTML 

• Crear un mapa del sitio 

• Crear vínculos 

• Aplicar una plantilla 

• Crear un menú de salto 

Nota: En este curso práctico se muestran algunas funciones que sólo son compatibles con 
exploradores de la versión 4.0 o superiores. 

Visita guiada a Dreamweaver 

Antes de comenzar, vea las películas de la visita guiada (Guided Tour) en la Ayuda 
de Dreamweaver para familiarizarse con las funciones del programa. 

1 En Dreamweaver, elija Ayuda > Uso de Dreamweaver. 

2 En la lista Contenido del marco de la izquierda, haga clic en Para comenzar y, a 
continuación, haga clic en Aprendizaje de Dreamweaver. 

3 Haga clic en el título de una película. 

4 Cierre el explorador cuando haya terminado. 
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Vista previa del sitio Web finalizado 

A continuación, observe el sitio Web finalizado para obtener una idea de lo que 
pretende llevar a cabo. 

1 Inicie Dreamweaver. 

2 En Dreamweaver, elija Archivo > Abrir. En el cuadro de diálogo de exploración 
de archivos, acceda a la carpeta de la aplicación Dreamweaver y, seguidamente, 
abra la carpeta Tutorial y, dentro de ésta, la carpeta Scaal_site. 

3 En la carpeta Scaal_site, seleccione scaal_home.html y haga clic en Abrir para 
abrir la página principal de Scaal en la ventana de documento. 

No edite esta página. Usted creará su propia versión de ella. 

4 Elija Archivo > Vista previa en el explorador y seleccione un explorador para ver 
la página principal de Scaal. (Utilice un explorador de la versión 4.0 o superior 
para ver este sitio.) 
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Welcome to the Scaal 


our story 


Coffee Web site, home of the 
finest coffee gifts in the world. 


Products 


this week 


Take a momentto view our many 
Products . We offer fine roasted 
producís as well as items to wear 
and items for the office. 

Scaal has been serving fine coffee 
connoisseurs like you for over 50 
years. We follow a roasting 
process that produces the finest 
coffees in the world. 


Check with us often to see our 
special promotions of the week. 



5 Mueva el cursor sobre los tres elementos del lado izquierdo de la página (Our 
Story, Products y This Week) y observe que los elementos se resaltan para 
indicar que son vínculos activos. 

Haga clic en los vínculos para explorar el sitio. Para volver a la página principal, 
haga clic en el logotipo de Scaal, situado en la parte superior de cada página. 

6 Cierre el explorador cuando termine de ver el sitio. 

7 Cierre Dreamweaver. 
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Organización de los archivos del curso práctico 

Los archivos HTML ya acabados y los parcialmente realizados que se utilizan en 
este curso práctico se encuentran en la carpeta Scaal_site de la carpeta Tutorial. Las 
imágenes y demás archivos relacionados con la creación del sitio se encuentran en 
subcarpetas de Scaal_site. La ruta completa de la carpeta Scaal_site puede variar en 
función del lugar donde haya instalado Dreamweaver 3.0. 

Cada archivo tiene un nombre significativo. Por ejemplo, el archivo HTML para 
la página terminada de productos de Scaal se llama products_index.htm. Los 
archivos parcialmente realizados (con los que deberá trabajar) tienen nombres 
idénticos a los de sus equivalentes del sitio ya acabado, con la diferencia de que 
comienzan por DW3_. Por ejemplo, la versión parcialmente realizada de 
products_index.htm se denomina DW3_products_index.htm. 


Configurar la estructura del sitio para el curso 
práctico 

Antes de comenzar el curso práctico, cree una carpeta para transferir a ella los 
archivos del sitio de Scaal. Posteriormente podrá utilizar la estructura de la carpeta 
Sites para almacenar otros sitios que cree. 

1 En la raíz del disco local, cree una carpeta y llámela Sites—por ejemplo, 
C:\Sites (Windows) o Hard Drive:Sites (Macintosh). 

2 Desde Dreamweaver/Tutorial, copie la carpeta Scaal_site en la carpeta Sites. 
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Definir un sitio local 


Comience el desarrollo del sitio definiendo un sitio local para los archivos en 
Scaal_site. Un sitio es un emplazamiento donde se almacenan todos los 
documentos y archivos pertenecientes a un determinado sitio Web. Al definir un 
sitio local se establece la estructura del sitio que se está creando y se indica a 
Dreamweaver dónde desea almacenar todos los archivos del sitio. Defina un sitio 
local para cada sitio Web que cree con Dreamweaver. 

Para este curso práctico deberá especificar la carpeta Scaal_site como carpeta del 
sitio local. 

1 Inicie Dreamweaver. 

Se abrirá un documento en blanco. 

2 Elija Sitio > Nuevo sitio. 

3 En el cuadro de diálogo Definición de sitio, asegúrese de que Datos locales está 
seleccionado en la lista Categoría. 

4 En el campo Nombre del sitio, escriba my_tutorial. 

El nombre del sitio permite identificarlo y seleccionarlo fácilmente en la lista de 
sitios que ha definido. 

5 Haga clic en el icono de carpeta situado a la derecha del campo Carpeta raíz 
local, acceda a la carpeta Sites/Scaal_site y haga clic en Abrir. A continuación, 
haga clic en Seleccionar (Windows) o Elegir (Macintosh). 

El campo Carpeta raíz local se actualizará para mostrar la ruta del sitio local. 



Nota: La ruta completa de la carpeta Scaal_site puede variar en función del lugar donde 
haya creado la carpeta Sites. 

6 Haga clic en Aceptar. 
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7 Haga clic en Crear cuando se le pregunte si desea crear un archivo de caché para 
el sitio. 

Al crear caché de los archivos en la carpeta Scaal_site se establece un registro de 
los archivos existentes de modo que Dreamweaver pueda actualizar 
rápidamente los vínculos al mover, cambiar el nombre o eliminar un archivo. 

La ventana Sitio mostrará a continuación una lista de todas las carpetas y 
archivos contenidos en el sitio local my_tutorial. La lista también actúa como 
administrador de archivos, ya que permite copiar, pegar, eliminar, mover y abrir 
archivos del mismo modo que en el explorador del ordenador. 



Archivo Edición Ver 

Sitio Ventana Ayuda 



1 dE 1 -&TI |my tutorial 

ZJ(* 

| ( $ Actualizar | | ♦ a | [ ♦ 

Sitio remoto 

I Tamaño|Tipo | Me 

Carpeta local 



Ha C:\Sites\Scaal site 



- _| 

Images 



é □ 

Library 



é □ 

T emplates 



n 

DW3_copy.txt 



m 

DW3 ourstorv wordhtml 




DW3 producís cdhtml 



na 

DW3 producís index.html 



sa 

DW3 Products muq.html 




DW3 scaal home.html 




DW3 thistveek.html 



I±1 

Image1.gif 




ourstory.html 



m 

Products cdhtml 



& 

1 

I 

lü 

1 



ft 

products_mints.html 



& 

producís mug.html 




scaal home.html 



tj 

thisweek.html 



IÉ 

transparent.gif 




■ 

t> Fecha 1074/9910:57 

Tamaño: 1KB 




8 Deje abierta la ventana Sitio. 

9 Haga clic en la ventana de documento para activarla. 
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Crear la página principal del sitio de Scaal. 

Ahora que ya ha configurado una estructura para almacenar el sitio de Scaal, 
creará su página principal. Mientras crea este documento, agregará un título de 
página, capas, imágenes, texto y vínculos. El documento tendrá los mismos 
componentes de diseño que la página principal terminada de Scaal. 

Si aún no están abiertos, abra los siguientes componentes del espacio de trabajo: 

• La paleta de objetos (elija Ventana > Objetos), que le servirá para agregar 
objetos al documento. 

• El inspector de propiedades (elija Ventana > Propiedades), que le permitirá 
definir propiedades o atributos para objetos del documento. 

Guardar el documento 

Guarde el documento en blanco que ha creado al iniciar Dreamweaver. 

1 Seleccione Archivo > Guardar. 

2 En el cuadro de diálogo Guardar como, seleccione la carpeta Sites/Scaal_site 
para guardar el archivo en ella. 

3 En el campo Nombre de archivo, escriba my_scaal_home.html. 

4 Haga clic en Guardar. 


Curso práctico de Dreamweaver 27 



Definir el título de la página 

El título de página de un documento HTML ayuda a los usuarios a identificar y 
realizar un seguimiento de la página que están explorando. El título de página 
aparece en la barra de título cuando la página se ve en el explorador. Cuando una 
página tiene un marcador, su título aparece en la lista de marcadores. Si crea un 
documento sin título de página, el explorador mostrará el título Documento sin 
título. 

1 Con la ventana de documento activa, elija Modificar > Propiedades de la página 
para ver las opciones de propiedades de la página. 

2 En el campo Título del cuadro de diálogo Propiedades de la página, escriba 
Cafés selectos Scaal. 



3 Haga clic en Aceptar. 

El título aparecerá en la barra de estado de la ventana de documento de 
Dreamweaver. 


Crear un diseño de página 

En este ejercicio, usted comenzará abriendo la versión ya acabada de la página 
principal de Scaal en un explorador para poder consultarla mientras trabaja. 

1 Elija Archivo > Abrir, acceda a la carpeta Sites/Scaal_site, seleccione 
scaal_home.html y, a continuación, haga clic en Abrir. 
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2 Pulse F12 para obtener una vista previa de la página en un explorador. 
La página principal aparecerá en el explorador. 
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Welcome to the Scaal 


our story 


Coffee Web site, home of the 
finest coffee gifts in the world. 


Products 


this week 


Take a momentto view our many 
Products . We offer fine roasted 
Products as well as items to wear 
and items forthe office. 

Scaal has been serving fine coffee 
connoisseurs like you for over 50 
years. We follow a roasting 
process that produces the finest 
coffees in the world. 


Check with us often to see our 
special promotions of the week. 



Deje la ventana del explorador abierta en segundo plano para consultarla 
cuando sea necesario. 

3 Haga clic en la ventana del documento scaal_home.html y, seguidamente, elija 
Archivo > Cerrar para cerrar el documento. 


Agregar capas 

Las capas son ideales para crear diseños de página complejos, ya que es fácil 
cambiar la posición de los elementos de la página arrastrándolos cuando se han 
colocado en capas. Diseñe la página principal utilizando capas y, a continuación, 
conviértalas en un diseño de tabla de modo que la página pueda ser vista 
correctamente en los exploradores de la versión 3.0 y 4.0. 

Si el documento contiene capas anidadas o solapadas, no se podrán convertir en 
tablas. 

1 Elija Ventana > Capas para abrir la paleta de capas. 

2 Compruebe que el cuadro Evitar solapamiento está activado. 

3 Haga clic en la ventana del documento my_scaal_home para hacerlo activo. 

4 Elija Insertar > Capa. 

Se agregará una capa al documento. 
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5 En el panel Común de la paleta de objetos, haga clic en el botón Arrastrar capa. 
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6 Al mover el cursor hasta la ventana de documento, éste se transformará en una 
herramienta de dibujo. En el espacio situado bajo la primera capa, arrastre el 
cursor para dibujar una capa nueva. 

7 Repita las acciones de los pasos 5 y 6 para dibujar otra capa. 

La página deberá tener una apariencia similar a la pantalla siguiente. 
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Seleccionar y manipular una capa 

Puede cambiar la posición o la forma de las capas del documento. 
1 Haga clic en el borde de la capa. 

Aparecerán manej adores alrededor de la capa seleccionada: 

ja_._ 


2 Para cambiar el tamaño de una capa, haga clic en un manej ador y arrástrelo 
hasta conseguir las proporciones deseadas. 

3 Para mover una capa, lleve a cabo una de estas operaciones: 

• Utilice las teclas de flecha. 

• Mantenga pulsada la tecla Mayús y use las teclas de flecha para mover una capa 
cinco píxeles en la dirección de la flecha usada. 

• Haga clic en la lengüeta de la esquina superior izquierda de la capa y arrástrela 
hasta la posición deseada. 

Agregar una imagen 

A continuación insertará la imagen del logotipo de Scaal en el documento. 

1 Haga clic en cualquier lugar de la capa superior. Al hacer clic en una capa se 
colocará el punto de inserción en ella, sin seleccionarla. 

Una capa activa con el punto de inserción en su interior presenta esta 
apariencia: 

p_ 


2 Elija Insertar > Imagen. 
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3 En el cuadro de diálogo Seleccionar origen de imagen, acceda a la carpeta Sites/ 
Scaal_site/Images y, a continuación, a logo_scaal.gif. Haga clic en Seleccionar 
(Windows) o Elegir (Macintosh). 

La imagen aparecerá en la capa. 
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brave new World coffee 




Agregar las imágenes de exploración 

A continuación agregará imágenes para los botones de exploración. 

Después de agregar las imágenes a los botones, añada espacio entre los gráficos: 
inserte un retorno de párrafo después de las imágenes. 

1 Coloque el punto de inserción en la capa de exploración (la capa inferior 
izquierda). 

2 En el panel Común de la paleta de objetos, haga clic en el botón Insertar 
imagen. 

Aparecerá el cuadro de diálogo Seleccionar origen de imagen. 

3 En la carpeta Images de Scaal_site, acceda a btn_ourstory_up.gif y, a 
continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) para 
insertar la imagen. 

La imagen Our Story aparecerá en la capa. 
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4 Coloque el punto de inserción en la capa detrás de la imagen y pulse Entrar 
(Windows) o Retorno (Macintosh) para agregar espacio entre esta imagen y la 
próxima que inserte. 



5 En la paleta de objetos, haga clic en el botón Insertar imagen y, en el cuadro de 
diálogo que aparece, seleccione btn_products_up.gif. Seguidamente, haga clic 
en Seleccionar (Windows) o Elegir (Macintosh). 

6 Coloque el punto de inserción en la capa detrás de la imagen y pulse Entrar 
(Windows) o Retorno (Macintosh). 

7 En la paleta de objetos, haga clic en el botón Insertar imagen y, en el cuadro de 
diálogo que aparece, seleccione btn_thisweek_up.gif. Seguidamente, haga clic 
en Seleccionar (Windows) o Elegir (Macintosh). 

El diseño del documento deberá ser similar a éste. 
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Asignar nombre a las imágenes 

Acostúmbrese a asignar nombre a los elementos de los documentos. De este 
modo, cuando necesite hacer referencia o seleccionar una determinada imagen, 
capa o algún otro elemento del documento, podrá identificarlos fácilmente. 
Posteriormente va a tener que hacer referencia a estas imágenes. Por tanto, 
asígneles un nombre. 

1 En la ventana de documento, haga clic en la imagen Our Story para 
seleccionarla. 

2 En el cuadro Imagen del inspector de propiedades, escriba ourstory. 


■■ Imagen. 1K Arj(88 Origen 1 aesíbtn ourstorn up giF fD» [ ~l Alineat | Preriet exnlnr O 
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3 Repita estos pasos, seleccionando y asignando nombre a las otras dos imágenes 
del documento. Asigne a la segunda imagen el nombre producís y a la tercera, 
thisweek. 


Agregar texto a una capa 

A continuación agregará texto a la capa restante. 

En Dreamweaver, puede escribir el contenido directamente en una capa o cortar y 
pegar en ella el contenido de otro documento. En este curso práctico, agregará 
texto a la capa copiando y pegando el contenido de un archivo de texto existente. 

1 Elija Archivo > Abrir y, a continuación, en la carpeta Scaal_site, abra 
DW3_copy.txt. 

El documento DW3_copy.txt se abrirá en una nueva ventana de documento de 
Dreamweaver. DW3_copy.txt es el archivo desde el que copiará el texto. 

2 Elija Edición > Seleccionar todo y seleccione el texto del documento. 

3 Elija Edición > Copiar para copiar el texto. 

4 Cierre el documento DW3_copy.txt. 

5 En el documento my_scaal_home, coloque el punto de inserción en la capa 
inferior derecha. 

6 Elija Edición > Pegar para pegar el texto en la capa. 
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Aplicar formato al texto 

Puede formatear texto en la ventana de documento definiendo sus propiedades en 
el inspector de propiedades. En primer lugar, seleccione el texto que desea 
formatear y, a continuación, aplique los cambios. Cambiarán la fuente y el tamaño 
del texto. 

Antes de formatear el texto, cree un par de párrafos. Agregue un retorno de párrafo 
después de la primera frase y después de la segunda. 

1 Si el inspector de propiedades no está abierto, elija Ventana > Propiedades. 

2 Con el punto de inserción en cualquier lugar de la capa, pulse Control+A 
(Windows) o Comando+A (Macintosh) para seleccionar todo el texto de la 
capa. 

3 En el segundo menú emergente Formato del inspector de propiedades, que 
indica Fuente predet., seleccione Arial, Helvética, sans-serif. 

4 En el menú emergente Tam, seleccione 3. 

El texto del documento se actualizará automáticamente para reflejar los 
cambios. 

Agregar un color de fondo a una capa. 

También puede utilizar el inspector de propiedades para establecer el color de 
fondo de una capa. Puede seleccionar un color utilizando el selector de colores o 
escribiendo su código hexadecimal. 

1 Haga clic en el borde de la capa que contiene el texto para seleccionarla. 
Cuando se selecciona una capa, aparecen manejadores alrededor de ella. 

2 En el inspector de propiedades, haga clic en el cuadro Col. fondo. 

Aparecerán la paleta de colores y el icono de cuentagotas. Puede utilizar el 
cuentagotas para escoger cualquier color del área de trabajo visible o de la paleta 
de colores. 
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3 Mueva el icono del selector de colores al logotipo de Scaal y, a continuación, 
haga clic en el color dorado que rodea la letra S. 

Se actualizará el color del fondo de la capa. 

¡islán 

^^^^b _brdve npw World coffpe 

our story 

Products 

this week 


brave new world 



a B 

1 

i/Velcome to the Scaal Coffee web site. Home of the finest 
coffee gifts in the world. Take a moment to view our many 
Products. 

i/Ve offer fine roasted producís as well as ítems to wear, and 
tems forthe office. Scaal has been serving fine coffee 
connoisiours like yourself for over 50 years. We follow a 
roasting process that produces the finest coffees in the world. 

Dheck backwith us often to see our special promotions of the 


Colocar las capas 

Ahora que ya realizado el diseño de la página en capas, convertirá este diseño en 
una tabla de modo que la página se pueda ver en los exploradores 3.0. 

Al convertir las capas en una tabla, Dreamweaver crea columnas, filas y celdas para 
que coincidan con las capas de la página. Para reducir el número de columnas, filas 
y celdas de la tabla que se crean al convertir el diseño del documento, alinee los 
elementos de capa antes de convertir el documento. Utilice el inspector de 
propiedades para colocar las capas en un documento. 

En primer lugar, cambie el tamaño y mueva las capas mientras diseña la página. A 
continuación, establezca la posición de las dos capas inferiores de modo que 
queden alineadas en la parte superior. 

1 Cambie el tamaño de la capa superior arrastrando sus manej adores hacia dentro 
hasta que se limiten a rodear el logotipo de Scaal y el texto que le sigue. 

2 Cambie el tamaño de la capa de exploración (capa inferior izquierda) 
arrastrando sus manejadores hacia dentro hasta que se limiten a rodear las 
imágenes. 


36 Capítulo 1 






















3 Mueva la capa de texto de modo que quede situada al lado de la capa de 
exploración. Seleccione la capa y, a continuación, utilice las teclas de flecha o 
arrastre la capa por la lengüeta. Las capas no se solaparán, pues está activada la 
opción Evitar solapamiento en la paleta de capas. 


S C A A L 


hravp npw wnrlri noFFpp 


our story 

lA/elcome to the Scaal Coffee web site, Home of the finest 

coffee gifts in the world. Take a moment to view our many 
Droducts. 

We offer fine roasted producís as well as Ítems to wear, and 
tems forthe office. Scaal has been serving fine coffee 
connoisseurs like yourself for over 50 years. We follow a 
oasting process that produces the finest coffees in the world. 


Products 


this week 


«eek- 


4 Si no están visibles todos los campos de propiedades de capa en el inspector de 
propiedades, haga clic en la flecha de ampliación de la esquina inferior derecha. 

5 Seleccione la capa que contiene las imágenes de exploración. Mantenga pulsada 
la tecla Mayús y seleccione la capa que contiene el texto. 

Se seleccionarán ambas capas. 

6 En el campo Sup del inspector de propiedades, escriba lOOpx. De este modo se 
colocarán con precisión ambas capas a 100 píxeles de la parte superior del 
documento. 



Haga clic en cualquier lugar del documento para desactivar la selección de las 
capas y para ver su alineación. 
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Convertir las capas en una tabla 

Ahora que ya ha dispuesto el formato de la página, convierta las capas en una tabla 
para que la página se muestre correctamente tanto en exploradores de la versión 
3.0 como de versiones posteriores. 

1 Elija Modificar > Modo de diseño > Convertir capas en tabla. 

Aparecerá el cuadro de diálogo Convertir capas en tabla. 



2 Compruebe que en la sección Diseño de tabla de este cuadro de diálogo están 
activadas las opciones Mínimo: contraer celdas vacías y Usar GIF transparentes. 

3 En la sección Herr. de diseño, compruebe que está activada la opción Evitar 
solapamiento capas. 

4 Haga clic en Aceptar. 

Las capas se convertirán en una tabla. 



Nota Dreamweaver establece el espado entre las columnas y las filas de tabla utilizando 
GIF transparentes. Después de convertir capas en una tabla, verá el archivo tranparent.gif 
en la raíz de la carpeta del sitio. No mueva este archivo a la carpeta Images. Si lo hace, 
aparecerán iconos de imagen rota cuando vea la página en un explorador. 

5 Cierre la paleta de capas. 

6 Guarde el archivo. 
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Crear imágenes de sustitución 

Las imágenes de sustitución cambian de apariencia cuando el cursor se desplaza 
sobre ellas. Para crear una imagen de sustitución, adjunte un comportamiento a 
una imagen. 

Un comportamiento es una combinación de un evento y una acción. Los eventos 
son situaciones que desencadenan acciones. Por ejemplo, un evento denominado 
onClick puede producirse cuando el usuario hace clic en un botón, al tiempo que 
un evento denominado onMouseOver puede ocurrir cuando el cursor del ratón pasa 
por encima de un objeto. Las acciones son fragmentos de código JavaScript ya 
definidos que realizan tareas específicas, como abrir la ventana de un explorador, 
reproducir un sonido o detener una película Shockwave. 

Al adjuntar un comportamiento a un elemento de una página, debe especificar 
tanto la acción como el evento que la activa. Dreamweaver ofrece diversas acciones 
predefinidas que puede agregar a los elementos de la página. 

En esta parte del curso práctico aplicará la acción Intercambiar imagen a las 
imágenes Our Story, Products y This Week, de modo que éstas se resalten cuando 
el cursor pase por encima de ellas (es decir, cuando se produzca el evento 
onMouseOver). Por ejemplo, cuando la imagen Our Story aparezca en la página 
normalmente, tendrá esta apariencia: 


our story 


Una vez definido un comportamiento que incluya la acción Intercambiar imagen 
durante el evento onMouseOver, la imagen Our Story tendrá esta apariencia (la 
misma imagen con otro color de fondo) cuando el ratón pase sobre ella: 


our story 
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Siga trabajando en el archivo de la página principal para adjuntar 
comportamientos a las imágenes de exploración de la página. A continuación, 
realice una vista previa de la página en un explorador para comprobar los 
comportamientos. 

1 En la ventana de documento, haga clic en la imagen Our Story para 
seleccionarla. 

2 Elija Ventana > Comportamientos o pulse F8 para abrir el inspector de 
comportamientos, que muestra todos los comportamientos definidos para un 
elemento seleccionado. 



3 El menú emergente Eventos para deberá mostrar Exploradores 3.0 y 
posteriores. Si no es así, seleccione esa opción. 

4 Agregue una nueva acción a la lista haciendo clic en el botón más (+) y 
eligiendo Intercambiar imagen en el menú emergente. 

Aparecerá el cuadro de diálogo Intercambiar imagen. En la lista Imágenes 
figurarán todas las imágenes de la página, con la imagen Our Story 
seleccionada. Esta es la imagen original, que será sustituida por una imagen 
resaltada cuando el cursor del ratón pase por encima de ella. 
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5 Haga clic en Examinar para acceder a la carpeta Scaal_site/Images, seleccione 
btn_ourstory_over.gif y, a continuación, haga clic en Seleccionar (Windows) o 
Elegir (Macintosh) para seleccionar la imagen. 

Esta imagen sustituye a la imagen original durante el evento onMouseOver. 



6 Acepte la configuración predeterminada para precargar y restaurar imágenes. 

La opción Carga previa de imágenes carga la imagen intercambiada en el caché 
del explorador conforme se carga la imagen, de manera que cuando el usuario 
pasa el cursor del ratón sobre la imagen Our Story no se produce ninguna 
demora apreciable antes de que aparezca la imagen resaltada. 

La opción Restaurar imágenes onMouseOut asigna automáticamente la acción 
Restaurar imagen intercambiada al evento onMouseOut para esta imagen. De 
este modo, la imagen vuelve a su estado original cuando el usuario aparta de 
ella el cursor del ratón. 

7 Haga clic en Aceptar para cerrar el cuadro de diálogo Intercambiar imagen y 
aplicar los campos que acaba de realizar. 

El inspector de comportamientos incluye ahora los eventos y las acciones que 
acaba de definir para la imagen. El evento onMouseOver aparece con la acción 
Intercambiar imagen. Sobre él se encuentra el evento onMouseOut con la acción 
Restaurar imagen intercambiada. Este comportamiento se definió al aceptar las 
opciones predeterminadas del cuadro de diálogo Intercambiar imagen. 
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8 Repita los pasos 4 a 7 para adjuntar las acciones Intercambiar imagen y los 
eventos onMouseOver a las imágenes Products y This Week: 

• Seleccione la imagen Products. A continuación, en el cuadro de diálogo 
Intercambiar imagen, defina el origen de la imagen de intercambio Products 
como btn_products_over.gif. 

• Seleccione la imagen This Week. En el cuadro de diálogo Intercambiar imagen, 
defina el origen de la imagen de intercambio This Week como 
btn_thisweek_over.gif. 

9 Cierre el inspector de comportamientos. 

10 Pulse F12 para ver el documento en el explorador de la Web predeterminado. 

No es preciso que guarde un documento antes de obtener su vista previa. 
Cuando realiza una vista previa de un documento funcionan todas las opciones 
relacionadas con el explorador. 

11 Mueva el cursor del ratón sobre las imágenes Our Story, Products y This Week 
para ver cómo cambian. 

12 Cuando termine de ver el archivo, cierre la ventana del explorador. 

13 Regrese a Dreamweaver y elija Archivo > Guardar para guardar los cambios 
realizados en la página principal. 

A continuación comenzará a crear los archivos a los que vinculará la página 

principal. 


Importar un documento HTML de Word 

El archivo del curso práctico para la página Our Story contiene un documento 
creado en Microsoft Word y guardado como documento HTML. En este ejercicio 
importará el documento en Dreamweaver y eliminará el código HTML no 
estándar del documento utilizando una nueva función de Dreamweaver 
denominada Limpiar HTML de Word. 

La función Limpiar HTML de Word ofrece opciones para limpiar o arreglar 
etiquetas HTML, definir elementos CSS (hojas de estilos en cascada), establecer 
un color de fondo para la página, eliminar las etiquetas de formato específicas de 
Word y convertir los tamaños de fuente y los encabezados de Word en atributos de 
tamaño HTML. 

1 Con la página my_scaal_home abierta, elija Archivo > Nuevo para abrir un 
archivo nuevo. 

2 Elija Archivo > Importar > Importar HTML de Word para importar un 
documento HTML de Word. 
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3 En el cuadro de diálogo Seleccionar archivo HTML de Word a importar, 
acceda a DW3_ourstory_word.html y, a continuación, haga clic en Seleccionar 
(Windows) o Elegir (Macintosh) para elegir el archivo HTML de Word. 

El programa le preguntará si desea guardar el documento. 



4 Haga clic en Aceptar. 

El documento Our Story se abrirá en segundo plano y aparecerá el cuadro de 
diálogo Limpiar HTML de Word delante del documento. 



Al seguir este curso práctico, acepte la configuración predeterminada del cuadro 
de diálogo Limpiar HTML de Word. Estas opciones establecen el color de 
fondo del documento como blanco, conservan gran parte del formato actual y 
limpian el código HTML del archivo. 
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5 En el cuadro de diálogo Limpiar HTML de Word, todas las opciones de la ficha 
Básicas deben estar seleccionadas de forma predeterminada. Compruebe que 
todas ellas están seleccionadas y haga clic en Aceptar. 

Aparecerá el registro de Limpiar HTML de Word, con detalles sobre el 
resultado de la operación. 



6 Haga clic en Aceptar. 

Aparecerá un documento en blanco. Este es el nuevo documento que creó antes 
de importar el documento HTML de Word. El documento importado se 
encuentra detrás del documento en blanco. 

7 Cierre el documento en blanco. 

8 Haga clic en el documento Our Story para convertirlo en la ventana activa. 

9 Elija Archivo > Guardar como para guardar el documento Our Story. Asígnele 
el nombre my_ourstory. 

Observe que el documento Our Story conserva el formato de tabla y los atributos 
de fuente del archivo original HTML de Word. 


Aplicar formato al texto usando estilos HTML 

Una vez importado el documento Our Story, cambiará el formato del texto. Una 
forma sencilla de aplicar formato a un documento consiste en utilizar estilos 
HTML. Un estilo HTML consta de una o más etiquetas HTML y puede incluir 
colores, fuentes, tamaño, etc. Puede crear estilos HTML para aplicar a un párrafo 
completo o a texto seleccionado. Una vez creado un estilo HTML, puede aplicarlo 
a cualquier página del sitio actual. 

A diferencia de los estilos CSS (es decir, con la especificación de hojas de estilos en 
cascada), el formato de estilos HTML sólo afecta al texto al que se aplica o que se 
crea usando dichos estilos. Si cambia el formato de un estilo HTML que ha 
creado, no se actualizará el texto que haya formateado originalmente con ese 
estilo. 
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Aplicar estilos HTML 

En este ejercicio utilizará un estilo HTML para formatear texto del documento 
Our Story. 

1 Elija Ventana > Estilos de HTML. Aparecerá la paleta de estilos HTML. 



Observe que los estilos de la paleta son para el sitio my_tutorial. La paleta 
contiene tres elementos: 

• Los dos primeros son los comandos de Dreamweaver Borrar estilo de la 
selección y Borrar estilo del párrafo. Utilícelos para borrar los estilos existentes 
en el texto que ha seleccionado en el documento. 

• El otro elemento es un estilo de párrafo HTML llamado body, creado 
especialmente para este curso práctico. 

2 Compruebe que está activada la opción Aplicar, en la esquina inferior izquierda 
de la paleta de estilos HTML. 

3 En el documento my_ourstory, coloque el punto de inserción en el primer 
párrafo. Para aplicar un estilo a un párrafo puede colocar el punto de inserción 
en cualquier lugar del mismo. 

4 En la paleta de estilos HTML, haga clic en el estilo body. 

El texto del primer párrafo adoptará el formato del nuevo estilo. 

5 Aplique el estilo body a otros párrafos del documento. 
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Crear estilos HTML 


En el siguiente ejercicio, creará un estilo HTML para dar énfasis a la palabra Scaal 
en el documento. 

1 Haga clic en el icono Nuevo estilo, situado en la parte inferior de la paleta de 
estilos HTML. 



Icono Nuevo estilo 


Aparecerá el cuadro de diálogo Definir estilo HTML. 



2 En el campo Nombre, escriba scaal. 

3 En Aplicar a, elija Selección. 

De este modo se aplicará el estilo a un rango de texto seleccionado en lugar de 
hacerlo a todo el párrafo. 

4 En Al aplicar, conserve la opción predeterminada, Borrar estilo existente. De 
este modo se borrarán los estilos aplicados al texto seleccionado cuando aplique 
el nuevo estilo. 
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5 En Atributos de fuente, seleccione los atributos deseados. Le sugerimos que 
seleccione los atributos siguientes: 

• Fuente: Arial, Helvética, sans-serif 

• Tamaño: 3 

• Color: #CC9933 (o utilice el selector de colores para elegir un color dorado) 

• Estilo: haga clic en Otro y seleccione Enfasis 

6 Haga clic en Aceptar. 

El nuevo estilo se agregará a la paleta de estilos HTML. Observe la a situada 
delante del estilo Scaal: este icono indica que el estilo es de selección, no de 
párrafo. 



Si desea aplicar un estilo a una selección, seleccione el rango de texto que desea 
reformatear. 

7 En la ventana de documento, seleccione la palabra Scaal en el primer párrafo. 

8 Seleccione el estilo scaal en la paleta de estilos HTML. 

El texto mostrará el nuevo estilo en el documento. 

SCAAL 

9 Aplique el estilo scaal a algunas selecciones más y, a continuación, cierre la 
paleta de estilos HTML. 

10 Elija Archivo > Guardar para guardar los cambios realizados en el documento 
my_ourstory. 

11 Elija Archivo > Cerrar para cerrar el documento. 
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Crear un mapa visual del sitio 

Utilice la opción de mapa que ofrece Dreamweaver para obtener una 
representación visual de alto nivel de la estructura de un sitio local. También 
puede utilizar el mapa para agregar nuevos archivos al sitio, para agregar, eliminar 
y cambiar vínculos y para crear un archivo gráfico del sitio que podrá exportar e 
imprimir desde una aplicación de edición de imágenes. 

La página principal del sitio siempre aparece en la parte superior del mapa; bajo la 
página principal aparecen los archivos con los que ésta tiene vínculos. 

Defina DW3_scaal_home.html como página principal del sitio my_tutorial. Esta 
página es similar a la página principal que usted ha creado. Es básicamente igual 
que el documento my_scaal_home, pero con el formato de imágenes y texto ya 
aplicado. 

Hay varias formas de definir la página principal de un sitio. La forma más sencilla 
consiste en usar el menú contextual. 

1 Haga clic en la barra de título de la ventana Sitio (si está visible) para activarla, 
o bien elija Ventana > Archivos del sitio. 

2 En la lista Carpeta local de la ventana Sitio, localice el archivo 
DW3_scaal_home.html. Haga clic con el botón izquierdo del ratón 
(Windows) o mientras pulsa la tecla Control (Macintosh) en el icono del 
archivo DW3_scaal_home.html. 

3 En el menú contextual, elija Establecer como página principal. 

4 Haga clic en el icono Mapa del sitio, en la parte superior izquierda de la 
ventana Sitio. 
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Aparecerá la ventana Sitio con dos vistas del sitio local: a la izquierda se encuentra 
un mapa del sitio que representa gráficamente la estructura actual del sitio Scaal 
(con DW3_scaal_home.html como página principal) y, a la derecha, una lista con 
el contenido de la carpeta local. 





Archivo Edición Ver Sitio Ventana Ayuda 

1 í&r |my tutorial H * 
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Exploración del sitio: ^ DW3_scaal_home.html 
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La página DW3_scaal_home no tiene vínculos actualmente. En la próxima 
sección del curso agregará vínculos a esta página. 

Deje abierta por el momento la ventana Sitio para poder observar cómo se 
actualiza al agregar vínculos a la página principal. 
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Crear vínculos 


Las imágenes de la parte izquierda de la página principal de Scaal guían a los 
visitantes a páginas específicas del sitio. Desde las imágenes Our Story, Products y 
This Week usted agregará vínculos a las páginas correspondientes. 

Observará que hay varias formas de crear vínculos con Dreamweaver. En primer 
lugar, agregará un vínculo desde la imagen Our Story a la página Our Story 
utilizando el inspector de propiedades. 

1 En la ventana Sitio, haga doble clic en el icono del archivo 
DW3_scaal_home.html, en cualquiera de los paneles. 

Se abrirá el archivo DW3_scaal_home.html. 

2 En la ventana de documento, haga clic en la imagen Our Story para 
seleccionarla. 

No haga doble clic en la imagen o, de lo contrario, Dreamweaver abrirá el 
cuadro de diálogo Seleccionar origen de imagen. 

3 Elija Ventana > Propiedades para abrir el inspector de propiedades si es que no 
está abierto. 

El inspector de propiedades de la imagen muestra información acerca de la 
imagen seleccionada. 



Nota El campo Vínculo contiene un signo de número (#) que se creó al adjuntar a la 
imagen el comportamiento Intercambiar imagen. No quite el signo de número (#), que 
será reemplazado por el nombre de archivo del documento con el que establezca el 
vínculo. 

4 En el inspector de propiedades, haga clic en el icono de carpeta situado a la 
derecha del campo Vínculo. 
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5 En el cuadro de diálogo Seleccionar archivo, acceda a my_ourstory.html y haga 
clic en Seleccionar (Windows) o Elegir (Macintosh) para seleccionar el archivo. 

El nombre de archivo aparecerá en el campo Vínculo del inspector de 
propiedades. A continuación agregará un vínculo a la imagen Products 
mediante el inspector de propiedades y la ventana Sitio. 

6 Haga clic en la barra de título de la ventana Sitio para activarla, o bien elija 
Ventana > Archivos del sitio. Si es preciso, cambie el tamaño de la ventana de 
documento para que pueda colocar el lado izquierdo de la ventana de 
documento y la ventana Sitio uno junto al otro. 
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7 En la ventana de documento, haga clic en la imagen Products para 
seleccionarla. 
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8 En el inspector de propiedades, arrastre el icono de señalización de archivo 
(situado al lado del campo Vínculo) hasta la ventana Sitio y señale el archivo 
DW3_products_index.html. 

El nombre del archivo aparecerá en el campo Vínculo del inspector de 
propiedades para la imagen products. 



Haga clic en el icono Mapa del sitio de la ventana Sitio. El mapa del sitio se 
actualizará para reflejar el vínculo que ha agregado. 



El 

mj_ouislorj.htm DV3_pioducts.html 


i 


l 

i 


Un signo más (+) situado junto a cualquier archivo del mapa del sitio indica 
que el archivo contiene vínculos con otros documentos. Haga clic en el signo 
más (+) para ampliar el árbol del mapa de forma que muestre los archivos 
asociados. Haga clic en el signo menos (-) para reducir la vista del mapa del 
sitio. 

A continuación, cambie un vínculo utilizando el menú contextual. 
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9 En la ventana de documento, haga clic con el botón derecho (Windows) o 
mientras pulsa la tecla Control (Macintosh) en la imagen This Week y elija 
Cambiar vínculo. 

Esta imagen está vinculada a un comportamiento que cambia la imagen 
mostrada cuando el usuario mueve el cursor sobre ella. Cambie el vínculo de 
modo que se abra un archivo cuando el usuario hace clic en la imagen. 

10 En el cuadro de diálogo Seleccionar archivo, acceda a DW3_thisweek.html y 
haga clic en Seleccionar (Windows) o Elegir (Macintosh) para seleccionar el 
archivo que desea abrir. 

Observe que el campo Vínculo del inspector de propiedades se actualiza para 
mostrar el nombre del archivo vinculado. A continuación creará un vínculo 
desde el texto. 

11 En el documento de Dreamweaver, seleccione la palabra producís en el segundo 
párrafo. 

12 Haga clic con el botón derecho del ratón (Windows) o mientras pulsa la tecla 
Control (Macintosh) y elija Crear vínculo en el menú contextual. 

13 En el cuadro de diálogo Seleccionar archivo, acceda a 
DW3_products_index.html y haga clic en Seleccionar (Windows) o Elegir 
(Macintosh) para seleccionar el archivo. 

14 Elija Archivo > Guardar para guardar todos los cambios realizados en la página 
principal. 

15 Seleccione Archivo > Cerrar para cerrar la página. 

Crear una plantilla 

Puede utilizar plantillas para crear documentos que tengan una estructura y una 
apariencia comunes. Las plantillas son útiles si desea asegurarse de que todas las 
páginas del sitio comparten determinadas características. 

Si aplica una única plantilla a un grupo de páginas, podrá editar la información 
del grupo de páginas editando la plantilla y, seguidamente, aplicándola de nuevo a 
dichas páginas. Mientras que los elementos exclusivos de cada página (como el 
texto que describe el artículo en venta) permanecen sin cambios, los elementos 
comunes de la plantilla (como las barras de desplazamiento) se actualizan en todas 
las páginas que comparten dicha plantilla. 
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La página de productos de Scaal tiene vínculos con diversas páginas en las que se 
describe la gama de productos que la empresa tiene a la venta. En este ejercicio, 
usted utilizará una página de productos existente para crear una plantilla. El uso 
de una plantilla garantiza que las páginas de productos tengan un diseño y 
formato idénticos. 

En esta sección, creará una plantilla a partir de una página de productos existente 
y, a continuación, empleará la plantilla para crear nuevas páginas de productos. 


Ver una página de productos 

Comience viendo la página de Scaal sobre discos compactos en un explorador. 

1 En la lista Carpeta local de la ventana Sitio, localice el icono del archivo 
product_cd.html y, a continuación, haga doble clic en el icono para abrir el 
archivo en Dreamweaver. 

2 Pulse F12 para obtener una vista previa de la página en una ventana del 
explorador. 
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L 


brave new worJd coFFee 



Scaal Sound 


Our very own coffee house collection, featuring 
Doetry slams, soulful vocals and a generous 
lelping ofthe blues. 


price: $ 12.95 


3 Cierre el explorador cuando termine de ver la página. 

4 Cierre el archivo products_cd.html. 
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Crear la plantilla 

En este ejercicio, usted creará una plantilla a partir de la versión del curso práctico 
de la página de Scaal sobre discos compactos. A continuación usará esta plantilla 
para crear páginas adicionales sobre productos. 

1 En la lista Carpeta local de la ventana Sitio, haga doble clic en el icono 
DW3_products_cd.html para abrir el archivo. 

2 Elija Archivo > Guardar como plantilla. 

Aparecerá el cuadro de diálogo Guardar como plantilla. 



La plantilla existente, product_page, se ha creado y aplicado a las páginas 
terminadas de productos del sito de Scaal. En este ejercicio, usted creará su 
propia versión de esta plantilla. 

3 En el campo Guardar como, cambie el nombre de la plantilla escribiendo 
my_product_page y haga clic en Guardar. 

Un documento nuevo aparecerá en la ventana de documento. Observe el 
identificador de plantilla y la extensión del archivo .dwt. 


Plantilla» > (my_products_page.dwt) - Dreamweavei 
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Modificar la plantilla 

En este punto, la plantilla nueva coincide con la página a partir de la cual ha 
guardado la plantilla. El diseño de algunas áreas debe ser el mismo en todas las 
páginas sobre productos: la fotografía, el nombre, la descripción y el precio del 
producto. En este ejercicio, usted aprenderá a definir estas áreas en la plantilla. 

Cada plantilla contiene regiones bloqueadas y editables. Las regiones bloqueadas 
sólo pueden editarse desde la propia plantilla; éstas aparecen con un color de 
resaltado en todas las páginas a las que se ha aplicado la plantilla. Las regiones 
editables son marcadores de posición para el contenido exclusivo de cada página a 
la que se ha aplicado la plantilla. En una plantilla aplicada, las regiones editables se 
encuentran resaltadas. 

1 En la plantilla my_product_page.dwt de la ventana de documento, seleccione y 
borre la imagen del disco compacto y escriba Insertar imagen aquí en la celda 
de la tabla. 

2 Seleccione el texto que acaba de escribir. 

3 



3 Elija Modificar > Plantillas > Nueva región editable. 
Aparecerá el cuadro de diálogo Nueva región editable. 
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4 En el campo Nombre, escriba Imagen como nombre de esta región de la 
plantilla. 



5 Haga clic en Aceptar. 

Observe que el texto aparece ahora resaltado, lo que indica que es una región 
editable de la plantilla. 

6 En la ventana de documento, seleccione el texto “Scaal Sound” y elija 
Modificar > Plantillas > Nueva región editable para convertir esta sección en 
una región editable de la plantilla. 

7 En el campo Nombre del cuadro de diálogo Nueva región editable, escriba 
Nombre y, a continuación, haga clic en Aceptar. 

En la ventana de documento, la región aparece resaltada y se puede identificar 
por el nombre que le asignó. 

8 En la ventana de documento, seleccione el texto descriptivo del producto y elija 
Modificar > Plantillas > Nueva región editable para convertir esta sección en 
una región editable de la plantilla. 

9 En el campo Nombre del cuadro de diálogo Nueva región editable, escriba 
Descripción y, a continuación, haga clic en Aceptar. 

En la ventana de documento, la región aparece resaltada y se puede identificar 
por el nombre que le asignó. 

10 Elija Archivo > Guardar para guardar la plantilla. 

Aparecerá el cuadro de diálogo Actualizar páginas, en el que podrá elegir si 
actualiza todos los documentos del sitio local. Si selecciona Sí se actualizarán las 
páginas del sitio terminado de Scaal y no es éste el objetivo. 

11 Haga clic en No y, seguidamente, en Cerrar para cerrar el cuadro de diálogo 
Actualizar páginas. 

12 Cierre la plantilla. 
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Aplicar la plantilla 

A continuación usará la plantilla para crear una nueva página sobre productos. 
1 Elija Archivo > Nuevo desde plantilla. 

Aparecerá el cuadro de diálogo Seleccionar plantilla. 



2 En la lista Plantillas, seleccione my_product_page como la plantilla que desea 
aplicar y, a continuación, haga clic en Seleccionar. 

Aparecerá un nuevo documento sin título. 


S C A A L 


brdve new world coPPee 


insert image here 


ñame 


. 

pnce: $12.95 


Las regiones sombreadas del documento son editables; mientras que las 
restantes regiones están bloqueadas y no se pueden editar. 

3 Guarde el documento y asigne al archivo el nombre my_products_mug.html. 
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Editar el documento 


Una vez definidas las regiones editables, la actualización de páginas es sencilla. En 
este ejercicio, usted reemplazará el texto marcador de posición por una imagen y 
agregará texto para crear la página de productos Commuter Mug de Scaal. 

1 Sitúe el punto de inserción en la región Imagen. 

2 Elija Insertar > Imagen. En el cuadro de diálogo que aparece seleccione mug.gif 
y, a continuación, haga clic en Seleccionar (Windows) o Elegir (Macintosh) 
para seleccionar la imagen. 

3 Borre el marcador de posición “Insertar imagen aquí”. 

4 En la región Nombre de la ventana de documento, escriba un nombre para el 
producto, como Commuter Mug y borre el marcador de posición. 

5 En la región Descripción de la ventana de documento, escriba texto descriptivo 
sobre Commuter Mug y borre el marcador de posición. 

6 Guarde el documento. 

7 Cierre el documento. 

En la próxima sección del curso práctico, usted vinculará documentos de páginas 
de productos a la página principal de productos de Scaal. Las páginas de productos 
que vinculará se crearon utilizando una plantilla similar. 
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Crear un menú de salto 


Un menú de salto es un menú emergente de opciones que vinculan y abren 
archivos en una ventana del explorador. En este ejercicio, usted creará un menú de 
salto que permita al cliente pasar rápidamente de la página de índice de productos 
a las páginas específicas de productos del sitio Scaal. 

Antes de crear el menú de salto, obtenga una vista previa de la página terminada. 

1 En la ventana Sitio, haga doble clic en el icono del archivo 
products_index.html para abrirlo. 

2 Pulse F12 para obtener una vista previa de la página en el explorador. 
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There are so many places you 
could go to buy coffee. WeVe 
gone to extraordinary efforts to 
ensure that SCAAL is your best 
choice. The quality begins at 
harvest. SCAAL relies on selective 
picking, a labor-intensive process 
that involves making several 
passes among the trees for those 
cherries that are perfectly ripe. 
Then we select top grade SHB, 
which stands for strictly hard bean 
or strictly high grown. Beans that 
are grown at a minimum altitude of 
4,000 feet above sea level for 
optimum flavor. Within hours of 
shipping our coffee to you, the 
beans are roasted on-site in small 
batches by a Certífied 


Select a productH 



a 



3 Haga clic en la flecha situada a la derecha del menú emergente de selección de 
productos para mostrarlo. Seleccione el producto que desea ver. 

4 Cuando termine de ver los archivos, cierre la ventana del explorador. 

5 Cierre el archivo products_index. 
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Insertar un menú de salto 

El menú de salto que cree contendrá un indicador de selección para informar a los 
visitantes sobre las opciones disponibles. También creará dos comandos de menú 
que se vincularán a páginas de productos. 

1 En la ventana Sitio, haga doble clic en el icono del archivo 
DW3_products_index.html para abrirlo. 

2 Seleccione y borre el texto “insertar menú de salto aquí”. 

3 Con el punto de inserción en la celda de la tabla, elija Insertar > Objeto de 
formulario > Menú de salto. 

Aparecerá el cuadro de diálogo Insertar menú de salto. 



4 En el campo Texto, escriba Seleccione un producto. 

Este texto indicará al visitante que debe llevar a cabo una acción. 

5 En Opciones, elija la opción Seleccionar primer elemento tras el cambio de 
URL. 

De este modo se establecerá la primera entrada de un menú como el elemento 
al que vuelve el menú cuando un usuario selecciona una opción en el menú de 
salto. 

6 Haga clic en el botón con el signo más (+) para agregar otro elemento al menú 
de salto. 

7 En el campo Texto, escriba Disco compacto. 

8 En el campo Al seleccionarse, ir a URL, haga clic en Examinar y acceda a 
DW3_products_cd.html. A continuación, haga clic en Seleccionar (Windows) 
o Elegir (Macintosh) para seleccionar el archivo que desea abrir cuando se 
seleccione el elemento. 

9 Haga clic en el botón con el signo más (+) para agregar otro elemento al menú 
de salto. 
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10 En el campo Texto, escríba Coffee mug. A continuación, haga clic en Examinar 
y acceda a DW3_products_mug.html. Haga clic en Seleccionar (Windows) o 
Elegir (Macintosh) para seleccionar el archivo que desea abrir cuando se 
seleccione el elemento. 

El cuadro de diálogo Insertar menú de salto deberá tener una apariencia similar 
a la pantalla siguiente. 



11 Haga clic en Aceptar para cerrar el cuadro de diálogo. 

12 Guarde el documento. 

El menú de salto no funciona en la ventana de documento. Es necesario 
obtener una vista previa en un explorador para comprobar sus vínculos. 


Comprobar el sitio 

Ahora que ya ha realizado todos los trabajos de edición necesarios en los archivos 
parcialmente realizados, vea el sitio completo en un explorador para comprobar su 
apariencia. 

1 Con la página DW3_scaal_home abierta, pulse F12 para abrir la página en un 
explorador. 

2 Haga clic en las imágenes Our Story, Products y This Week para ver las otras 
páginas que ha editado para el sitio. Seleccione los elementos del menú de salto 
en la página Products. 

3 Cuando termine de ver el sitio que ha creado, cierre la ventana del explorador, 
regrese a Dreamweaver y elija Archivo > Cerrar para cerrar la página principal. 
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CAPÍTULO 2 

Aspectos básicos de Dreamweaver 


Comenzar a utilizar Dreamweaver es tan fácil como abrir un documento HTML o 
crear uno nuevo. Sin embargo, para sacar el máximo provecho de Dreamweaver, 
deberá conocer cuáles son los conceptos relativos al área de trabajo de 
Dreamweaver y cómo seleccionar las opciones que mejor se adapten a su forma de 
trabajar. 

Área de trabajo de Dreamweaver 

El área de trabajo de Dreamweaver es flexible, lo que le permite adaptarse a 
distintas formas de trabajar y diversos niveles de experiencia. Cuenta con algunos 
componentes que se utilizan constantemente: 

• La ventana de documento muestra el documento actual mientras lo está 
creando y editando. 

• El lanzador contiene botones para abrir y cerrar los inspectores y paletas 
utilizados con mayor frecuencia. Los iconos del lanzador se incluyen también 
en el minilanzador, situado en la parte inferior de la ventana de documento, lo 
que facilita el acceso a éstos cuando el lanzador está cerrado. Puede definir qué 
iconos aparecen en el lanzador utilizando el panel Paletas flotantes del cuadro 
de diálogo Preferencias. 

• La paleta de objetos contiene botones para la creación de diversos tipos de 
objetos, como imágenes, tablas, capas, etc. 

• El inspector de propiedades muestra las propiedades del objeto o el texto 
seleccionado y permite su modificación. 

• Los menús contextúales permiten acceder rápidamente a comandos útiles 
relacionados con la selección o área actual. 
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Las paletas flotantes acoplables permiten combinar ventanas, inspectores y 
paletas flotantes en una o varias ventanas con fichas de selección. 


Paleta de objetos 



Lanzador 


— Menú contextual 


Ventana de 
documento 


Imagen. 1K 

An 23 Qiigen imagesispacei_clear.gif (-^Qj Alinear | Izquierda - | ') 

1 

A] 334 Vínculo fíV 1 All 


Minilanzador 


Inspector de 
propiedades 


Usar el menú Ventana 

El menú Ventana facilita el acceso a todas las ventanas, inspectores y paletas de 
Dreamweaver. Una marca de verificación al lado de un elemento de este menú 
indica que el elemento señalado se encuentra abierto, aunque puede estar oculto 
detrás de otras ventanas. Para mostrar un elemento que no tiene una marca de 
verificación al lado de su nombre, seleccione el nombre del elemento en el menú. 

En general, si no está seguro de dónde buscar un elemento de Dreamweaver, 
acuda al menú Ventana. 

Paletas flotantes acoplables 

La mayoría de las paletas e inspectores de Dreamweaver se pueden acoplar o 
combinar en una única paleta flotante con múltiples fichas de selección. Esto 
facilita el acceso a la información sin saturar el espacio de trabajo. El lanzador, el 
inspector de propiedades y la ventana Sitio no se pueden acoplar. 
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Para combinar dos o más paletas y crear una paleta con fichas de selección: 

1 Arrastre la ficha (no la barra de título) de una paleta flotante sobre otra paleta 
flotante. Cuando aparezca un borde resaltado alrededor de la paleta de destino, 
suelte el botón del ratón. 

2 Haga clic en cualquier ficha de la ventana para colocar la paleta correspondiente 
en primer plano. 

Dado que la paleta de objetos no tiene ninguna ficha, no se puede acoplar con otra 
paleta arrastrándola sobre ella. Sin embargo, sí puede arrastrar la ficha de otra 
paleta sobre la paleta de objetos para combinarlas. 

Para quitar una paleta de la paleta con fichas de selección: 

Arrastre su ficha fuera de la ventana. 

Para mover una paleta desde una paleta con fichas de selección hasta otra: 

Arrastre su ficha hasta la otra paleta con fichas de selección. Cuando aparezca un 
borde resaltado alrededor de la paleta de destino, suelte el botón del ratón. 

Configurar preferencias de paletas flotantes 

Utilice las preferencias de paletas flotantes para especificar qué paletas e 
inspectores aparecerán siempre sobre la ventana de documento y cuáles podrán 
quedar ocultos por dicha ventana. También puede emplear este panel de 
preferencias para especificar qué paletas e inspectores aparecen en el lanzador. 
Todos los elementos que aparecen en el lanzador aparecerán también en el 
minilanzador. 


Para especificar dónde aparece cada paleta en relación con la ventana de 
documento: 

1 Elija Edición > Preferencias y, a continuación, seleccione Paletas flotantes en la 
lista de categorías. 

De forma predeterminada, todas las ventanas, paletas e inspectores están 
configurados para que aparezcan sobre la ventana de documento. 

2 Desactive la selección de las ventanas, paletas e inspectores que desea que 
aparezcan en segundo plano en la ventana de documento. 

Por ejemplo, si desea permitir que la ventana de documento oculte el inspector 
de código fuente HTML, desactive la opción HTML. Ahora el inspector de 
código fuente HTML sólo aparecerá sobre la ventana de documento cuando se 
encuentre activo. 

Del mismo modo, si desea permitir que la ventana de documento oculte las 
paletas flotantes que ha añadido al personalizar Dreamweaver, desactive Resto 
de flotadores. 
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Ventana de documento 


La ventana de documento muestra el documento actual aproximadamente igual a 
como aparecerá en un explorador de la Web. La barra de título de la ventana de 
documento muestra el título de la página y, entre paréntesis, el nombre del 
archivo y un asterisco si el archivo contiene cambios no guardados. 

Las etiquetas que controlan el texto u objeto seleccionado aparecen en el selector 
de etiquetas, situado en la parte inferior izquierda de la ventana de documento. 
Haga clic en una de estas etiquetas para resaltar su contenido en la ventana de 
documento. Haga clic en <body> para seleccionar todo el cuerpo del documento. 

El conjunto de botones situado en la parte inferior derecha de la ventana de 
documento se denomina minilanzador, ya que se trata de una versión reducida del 
lanzador. Los botones que aparecen de forma predeterminada en el minilanzador 
son iguales que los del lanzador: permiten abrir la ventana Sitio, la paleta de 
bibliotecas, la paleta de estilos HTML, la paleta de estilos CSS, el inspector de 
comportamientos, la paleta de marcador y el inspector de código fuente HTML. 

A la izquierda del minilanzador aparecen el tamaño de la página y el tiempo de 
descarga estimados, incluidos los archivos dependientes, como las imágenes y las 
películas Shockwave. Consulte ““Comprobar el tiempo y el tamaño de descarga”, 
en la página 171”. 

La ventana emergente Tamaño de ventana permite cambiar el tamaño de la 
ventana de documento para que adopte dimensiones predeterminadas o 
personalizadas. Consulte “Cambiar el tamaño de la ventana de documento”, en la 
página 67. 
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Cambiar el tamaño de la ventana de documento 


La barra de estado de la ventana de documento indica las dimensiones actuales (en 
píxeles) de la ventana. Al hacer clic en el tamaño de la ventana se activará el menú 
emergente Tamaño de ventana, que permite adaptar las dimensiones de la ventana 
a las del monitor. Para lograr un diseño de página que tenga una apariencia 
adecuada en un tamaño concreto (o en varios tamaños distintos), puede ajustar la 
ventana de documento con cualquiera de los tamaños enumerados en el menú 
emergente. 

Nota: El tamaño de la ventana indicado corresponde a las dimensiones internas de la 
ventana del explorador, sin bordes. El tamaño del monitor figura entre paréntesis. Por 
ejemplo, la opción "536 x 196 (640 x 480, Predeterminado)" es el tamaño de ventana que 
se debe utilizar si los visitantes van a hacer uso de Internet Explorer o Netscape Navigator en 
su configuración predeterminada con un monitor de 640 x 480. 


Para establecer un tamaño predeterminado para la ventana de documento: 

Elija uno de los tamaños del menú emergente situado en la parte inferior de la 
ventana de documento. 

Para cambiar los valores que aparecen en el menú emergente Tamaño de ventana: 

1 Elija Editar tamaños en el menú emergente Tamaño de ventana. 

2 Haga clic en cualquiera de los valores de Ancho o Alto de la lista de tamaños de 
ventana y escriba un valor nuevo. 

Para hacer que la ventana de documento se ajuste sólo a un ancho específico 
(sin modificar el alto), seleccione un valor de altura y elimínelo. 

3 Haga clic en el campo Descripción para introducir texto descriptivo sobre un 
tamaño específico. 

Para agregar un valor al menú emergente Tamaño de ventana: 

1 Elija Editar tamaños en el menú emergente Tamaño de ventana. 

2 Haga clic en el espacio en blanco situado debajo del último valor de la columna 
Ancho. 

3 Introduzca valores en Ancho y Alto. 

4 Haga clic en el campo Descripción para introducir el texto descriptivo sobre el 
tamaño agregado. 

Por ejemplo, puede escribir “SVGA” o “PC estándar” junto a la entrada para un 
monitor de 800 x 600 píxeles, y “Mac 17 pulg.” junto a la entrada para un 
monitor de 832 x 624 píxeles. Recuerde que la mayoría de los monitores se 
pueden ajustar a varias dimensiones de píxeles. 
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Configurar preferencias de barra de estado 

Utilice las preferencias de barra de estado para definir opciones para la barra de 
estado, situada en la parte inferior de la ventana de documento. Para mostrar estas 
preferencias, elija Edición > Preferencias y seleccione Barra de estado. 

Tamaños de ventana Permite personalizar los tamaños de las ventanas que 
aparecen en el menú emergente de la barra de estado. Consulte “Cambiar el 
tamaño de la ventana de documento”, en la página 67. 

Velocidad de conexión Determina la velocidad de conexión (en kilobits por 
segundo) empleada para calcular el tamaño de descarga. El tamaño de descarga de 
la página se muestra en la barra de estado. El tamaño de descarga de las imágenes 
se muestra en el inspector de propiedades cuando se selecciona una imagen. 

Mostrar minilanzador en barra de estado Hace que Dreamweaver muestre el 
minilanzador en la parte inferior de la ventana de documento. Los botones del 
minilanzador permiten abrir ventanas, paletas e inspectores. 


Usar el inspector de propiedades 

El inspector de propiedades permite examinar y editar las propiedades del 
elemento de página seleccionado actualmente. Un elemento de página es un 
objeto o texto. Puede seleccionar elementos de página en la ventana de documento 
o en el inspector de código fuente HTML. 

Para mostrar u ocultar el inspector de propiedades, elija Ventana > Propiedades. 
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La mayoría de los cambios realizados en las propiedades se aplicarán de inmediato 
en la ventana de documento . Para aplicar un cambio en algunas propiedades es 
necesario hacer clic fuera de sus campos de edición o pulsar la tecla Tab para pasar 
a otra propiedad. 

Las propiedades que aparecen en el inspector de propiedades dependen del 
elemento seleccionado. Para obtener información sobre propiedades concretas, 
seleccione un elemento en la ventana de documento y, a continuación, haga clic 
en el icono Ayuda, situado en la esquina superior derecha del inspector de 
propiedades. 

El inspector de propiedades muestra inicialmente las propiedades del elemento 
seleccionado que se utilizan con mayor frecuencia. Haga clic en la flecha de 
ampliación, situada en la esquina inferior derecha del inspector de propiedades, 
para ver más propiedades del elemento. Es posible que algunas propiedades 
ocultas ni siquiera aparezcan en el inspector de propiedades ampliado. 
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Usar el lanzador 


El lanzador contiene botones que permiten abrir y cerrar diversos inspectores, 
paletas y ventanas. Para mostrar u ocultar el lanzador, elija Ventana > Lanzador. 
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Para cambiar la orientación horizontal del lanzador por la vertical, haga clic en el 
icono de orientación situado en la parte inferior derecha. 

Para obtener información sobre los botones predeterminados del lanzador, 
consulte “Ventana Sitio”, en la página 144, “Usar la paleta de bibliotecas”, en la 
página 377, “Aplicar formato al texto usando estilos HTML”, en la página 184, 
“Usar la paleta de estilos CSS”, en la página 194, “Usar el inspector de 
comportamientos”, en la página 298, “Paleta de marcador”, en la página 97 o 
“Utilizar el inspector de código Fuente HTML”, en la página 336. 


Personalizar el lanzador 

Utilice las preferencias de paletas flotantes para determinar qué elementos 
aparecen en el lanzador y el minilanzador en la parte inferior de la ventana de 
documento. 

Para especificar qué paletas flotantes aparecen en el lanzador y el minilanzador: 

1 Elija Edición > Preferencias y, a continuación, seleccione Paletas flotantes en la 
lista de categorías. 

Los elementos seleccionados para mostrar en el lanzador y el minilanzador 
aparecerán en el cuadro Mostrar en Lanzador. Aparecerán siete elementos de 
forma predeterminada. 

2 Para añadir un elemento al lanzador y al minilanzador, haga clic en el botón 
con el signo más (+). 

3 Para quitar un elemento del lanzador y el minilanzador, resalte el elemento y 
haga clic en el botón con el signo menos (-). 

4 Para mover un elemento hacia arriba o hacia abajo de la lista, equivalente a 
moverlo a izquierda o derecha (respectivamente) en el lanzador y el 
minilanzador, seleccione dicho elemento y haga clic en las teclas de flecha. 

5 Haga clic en Aceptar. 

El lanzador y el minilanzador cambiarán para mostrar los elementos que haya 
especificado. 
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Usar la paleta de objetos 

La paleta de objetos contiene botones para la inserción de diversos tipos de 
objetos, como tablas, capas e imágenes. Para mostrar u ocultar la paleta de objetos, 
elija Ventana > Objetos. Para insertar un objeto, haga clic en el botón 
correspondiente de la paleta de objetos o arrastre el icono del botón a la ventana 
de documento. Mantenga pulsada la tecla Control (Windows) o la tecla Opción 
(Macintosh) mientras inserta un objeto para evitar el cuadro de diálogo Insertar 
objeto e introducir un objeto marcador de posición vacío del tipo especificado. 
Por ejemplo, para insertar un marcador de posición para una imagen sin 
especificar un archivo de imagen, mantenga pulsada la tecla Control u Opción y 
haga clic en el botón Imagen. 

La paleta de objetos contiene seis paneles de forma predeterminada: Caracteres, 
Común, Formularios, Marcos, Head e Invisibles. Utilice el menú emergente de la 
parte superior de la paleta para pasar de un panel a otro. Puede modificar 
cualquier objeto de la paleta o crear sus propios objetos. Consulte “Cambiar la 
paleta de objetos”, en la página 388. Para obtener información sobre las opciones 
de cada panel, consulte los temas relacionados en la Ayuda de Dreamweaver. 
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La paleta de objetos contiene los paneles siguientes: 

• El panel Común contiene los objetos más utilizados, como las imágenes, las 
tablas y las capas. 

• El panel Caracteres contiene caracteres especiales, como los símbolos de 
copyright y marca registrada y las comillas angulares. Es posible que estos 
símbolos no se muestren correctamente en exploradores distintos de Netscape 
Navigator 3 y 4 e Internet Explorer 3 y 4. 

• El panel Formularios contiene botones que permiten crear formularios y 
elementos de formulario. 
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• El panel Marcos contiene estructuras comunes de conjuntos de marcos. 

• El panel Head contiene botones que permiten agregar diversos elementos HEAD, 
como las etiquetas META, KEYWORDS y BASE . 

• El panel Invisibles contiene botones que permiten crear objetos no visibles en la 
ventana de documento, como los puntos de fijación con nombre. Elija Ver > 
Elementos invisibles para ver los iconos que marcan la posición de estos 
objetos. Haga clic en los iconos de elementos invisibles de la ventana de 
documento para seleccionar los objetos y cambiar sus propiedades. Consulte 
“Elementos invisibles”, en la página 92. 

Algunas de las preferencias generales afectan a la paleta de objetos. Para cambiar 

estas preferencias, elija Edición > Preferencias y seleccione General. 

• Cuando inserte objetos tales como imágenes, tablas, secuencias de comandos y 
elementos HEAD, aparecerá un cuadro de diálogo solicitando información 
adicional. Puede suprimir estos cuadros de diálogo desactivando la opción 
Mostrar diálogo al insertar objetos. Cuando se inserta un objeto con esta 
opción desactivada, el objeto recibe valores de atributo predeterminados. 
Después de insertar el objeto, utilice el inspector de propiedades para cambiar 
sus propiedades. 

• Las preferencias de paleta de objetos permiten visualizar el contenido de la 
paleta de objetos como Sólo texto, Sólo iconos o Iconos y texto. 

Usar la paleta de marcador 

La paleta de marcador realiza un seguimiento del trabajo realizado en 

Dreamweaver. Para mostrar la paleta de marcador, elija Ventana > Marcador. 



Puede utilizar la paleta de marcador para deshacer varios pasos de una sola vez, 
para volver a reproducir pasos dados anteriormente y para automatizar tareas 
mediante la creación de comandos. Si desea más información, consulte “Paleta de 
marcador”, en la página 97. 
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Usar Menús contextúales 

Dreamweaver emplea de forma extensiva los menús contextúales, ya que 
proporcionan un método para acceder rápidamente a los comandos y las 
propiedades más útiles relacionados con la ventana o el objeto con el que esté 
trabajando. En los menús contextúales sólo aparecen los comandos pertinentes 
para la selección actual. 


Para utilizar menús contextúales: 

1 Abra el menú contextual haciendo clic con el botón izquierdo del ratón 
(Windows) o haciendo clic mientras pulsa la tecla Control (Macintosh) en el 
objeto o la ventana. 

2 Seleccione el comando del menú contextual y suelte el botón del ratón. 
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Comprobar vínculos 

Comprobar exploradores de destino... 
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Usar el inspector de código fuente HTML 

El inspector de código fuente HTML muestra el código que utilizan los 
exploradores para mostrar el documento como una página Web. Para mostrar u 
ocultar el inspector de código fuente HTML, elija Ventana > Fuente HTML. 

Los cambios realizados en la ventana de documento se reflejarán inmediatamente 
en el inspector de código fuente HTML. Si introduce HTML en el inspector de 
código fuente y, a continuación, hace clic fuera del inspector, los cambios 
correspondientes aparecen en la ventana de documento. Para obtener más 
información, consulte “Utilizar el inspector de código Fuente HTML”, en la 
página 336. 

Para realizar cambios menores en etiquetas HTML puede utilizar el Quick Tag 
Editor en lugar del inspector de código fuente. Para mostrar el Quick Tag Editor, 
pulse Control+T (Windows) o Comando +T (Macintosh) o elija Modificar > 
Quick Tag Editor. Para obtener más información, consulte “Editar una etiqueta 
HTML en la ventana de documento”, en la página 338. 


Definir preferencias 

Dreamweaver incluye parámetros de definición de preferencias que determinan la 
apariencia general del interfaz de usuario de Dreamweaver, así como las opciones 
relacionadas con funciones concretas, como capas, hojas de estilos, HTML, 
editores externos y vista previa de páginas en un explorador. A lo largo de esta 
guía del usuario se facilita información sobre opciones de preferencias específicas, 
junto con la función o el tema asociados. 

Esta guía sólo describe las opciones de preferencias más comunes. Consulte el 
tema correspondiente en la Ayuda de Dreamweaver para obtener información 
sobre opciones de preferencias que no se aborden aquí. 

Configurar preferencias generales 

Las preferencias generales controlan la apariencia global de Dreamweaver. Para 
cambiar estas preferencias, elija Edición > Preferencias y haga clic en General. 


Configurar preferencias de fuentes/codificación 

Utilice las preferencias de fuentes/codificación para definir una codificación de 
fuentes predeterminada de documentos nuevos y establecer las fuentes que utiliza 
Dreamweaver para mostrar cada codificación. La codificación de un documento 
determina cómo se muestra éste en un explorador. La configuración de fuentes de 
Dreamweaver permite manipular texto con la fuente y el tamaño deseados sin que 
ello afecte la apariencia del documento cuando otros usuarios lo vean en un 
explorador. 
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Para cambiar la codificación del documento actual: 

Elija Modificar > Propiedades de la página y, a continuación, seleccione una 

codificación en el menú emergente Codificación del doc. 

Para cambiar la codificación predeterminada empleada al crear documentos: 

Elija Edición > Preferencias, haga clic en Fuentes /codificación en la lista 

Categoría y elija una codificación en el menú emergente Codificación pred. 

Para definir las fuentes que desea utilizar para cada tipo de codificación: 

1 Elija Edición > Preferencias y haga clic en Fuentes /codificación en la lista 
Categoría. 

2 Seleccione el tipo de codificación (por ejemplo, Occidental (Latinl) o Japonés) 
en la lista Config. fuentes y, a continuación, elija las fuentes que desea utilizar 
para esa codificación en los menús emergentes situados debajo de la lista 
Config. fuentes. 


Usar Dreamweaver con otras aplicaciones 

Dreamweaver facilita el proceso de diseño y desarrollo de páginas Web al 
permitirle trabajar con otras aplicaciones. Para obtener información sobre cómo 
trabajar con otras aplicaciones, como los exploradores, los editores HTML, los 
editores de imágenes y las herramientas de animación, consulte los temas 
siguientes: 

• Para obtener información sobre el uso de Dreamweaver con otros editores 
HTML, como HomeSite o BBEdit, consulte “Usar editores de HTML 
externos”, en la página 352. 

• Puede especificar sus exploradores preferidos para la obtención de una vista 
previa del sitio. Consulte “Vista previa en exploradores”, en la página 170. 

• Puede lanzar un editor de imágenes externo, como Macromedia Fireworks, 
desde Dreamweaver. Consulte “Usar un editor de imágenes externo”, en la 
página 205. 

• Puede configurar Dreamweaver para que lance un editor distinto para cada tipo 
de archivo. Consulte “Iniciar un editor de medios externo”, en la página 282. 

• Para obtener información acerca de cómo agregar animación al sitio mediante 
películas de Flash, consulte “Insertar películas Flash”, en la página 286. 

• Para aprender a agregar interacción al sitio mediante películas Shockwave, 
consulte “Insertar películas Shockwave”, en la página 284. 
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CAPÍTULO 3 

Crear sitios y 


Un sitio Web es un conjunto de documentos vinculados con atributos 
compartidos, tales como temas relacionados, un diseño similar o un objetivo 
común. 

Con Dreamweaver se pueden crear documentos individuales, pero la mayoría de 
los diseñadores de páginas Web crean sitios coherentes, no conjuntos de 
documentos variados sin relación alguna. Dreamweaver es una herramienta que 
sirve para crear y administrar sitios, así como para crear y editar documentos. 

Crear un sitio a partir de un conjunto de distintos documentos preexistentes es 
mucho más complicado que crear nuevos documentos a partir de un sitio con un 
diseño común. Para obtener resultados óptimos, diseñe y planifique el sitio antes 
de crear las páginas correspondientes. 

Nota: Si desea comenzar a crear documentos inmediatamente, puede probar algunas de las 
herramientas de creación de documentos de Dreamweaver y realizar un documento de 
muestra. (Consulte "Crear y editar documentos HTML", en la página 86.) Sin embargo, no 
comience un desarrollo serio del documento hasta que haya configurado el sitio. 

El primer paso a la hora de crear un sitio Web consiste en planificarlo. Consulte 
“Planificación de sitios”, en la página 76. El paso siguiente consiste en establecer la 
estructura básica del sitio. Consulte “Crear un sitio local”, en la página 78. Si ya 
dispone de un sitio en un servidor Web y desea usar Dreamweaver para editarlo, 
consulte “Editar y actualizar un sitio existente”, en la página 80. 

Una vez creado el sitio local, puede comenzar a integrar documentos en él. Los 
documentos son las páginas que los usuarios ven cuando visitan un sitio Web. Los 
documentos contienen texto e imágenes, además de otros elementos más 
sofisticados, como sonido, animación y vínculos con otros documentos. 
Conforme cree y trabaje con los documentos, Dreamweaver generará 
automáticamente el código HTML necesario. Use el inspector de código fuente 
HTML para examinar o editar el código HTML. 
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En Dreamweaver puede crear documentos a partir de páginas HTML en blanco o 
de plantillas. También puede abrir y modificar documentos HTML creados en 
otras aplicaciones. Consulte “Crear y editar documentos HTML”, en la 
página 86. 

Use el cuadro de diálogo Propiedades de la página para configurar un documento 
y definir los elementos básicos de la página. El título de la página identifica al 
documento ante el usuario. Las imágenes de fondo, los colores de fondo y los 
colores del texto y los vínculos personalizan la página y permiten distinguir el 
texto normal del hipertexto. Consulte “Configurar las propiedades del 
documento”, en la página 95. 

Para agregar texto a los documentos, escriba en la ventana de documento o pegue 
texto procedente de otras aplicaciones. Las imágenes, reglas horizontales y otros 
objetos se agregan utilizando la paleta de objetos o los comandos del menú 
Insertar. Consulte “Agregar texto e insertar objetos”, en la página 88. 

Al agregar contenido, podrá seleccionar y modificar objetos directamente en la 
ventana de documento. En algunos casos, es posible que tenga que seleccionar los 
marcadores que representan a los elementos de la página que no están visibles en la 
ventana de documento. Consulte “Seleccionar elementos en la ventana de 
documento”, en la página 91. 

Para ayudarle a gestionar el sitio, Dreamweaver muestra los archivos del sitio como 
lista o mapa. Puede usar el mapa del sitio para crear y ver rápidamente prototipos 
de sus sitios Web. Consulte “Trabajar con archivos del sitio”, en la página 84 y 
“Ver la estructura del sitio”, en la página 127. 

Cuando tenga algunos documentos, podrá comenzar a crear vínculos para 
conectarlos a otros documentos del sitio, a documentos de sitios remotos, a 
direcciones de correo electrónico o a secuencias de comandos. Consulte “Crear 
vínculos”, en la página 114. 

Por último, configure un sitio remoto correspondiente al sitio local y cargue los 
archivos locales en el sitio remoto para que los visitantes puedan ver sus páginas. 
Consulte “Configurar un sitio remoto”, en la página 140. 


Planificación de sitios 

En Dreamweaver, el término sitio puede hacer referencia a un sitio Web o un 
emplazamiento local de almacenamiento de documentos pertenecientes a un sitio 
Web. La forma habitual de crear un sitio consiste en crear una carpeta en el disco 
local con todos los archivos del sitio y crear y editar los documentos dentro de 
dicha carpeta. Posteriormente, se copiarán periódicamente esos archivos en un 
servidor Web, lo que hace posible que otras personas visiten el sitio. Este 
procedimiento resulta mucho más conveniente que crear y editar los archivos en el 
sitio Web directamente, ya que permite comprobar los cambios en el sitio local 
antes de hacerlos públicos y, a continuación, realizar simultáneamente todos los 
cambios en el sitio Web en lugar de aplicarlos uno a uno. 
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Planificar la estructura del sitio 


Organizar cuidadosamente el sitio desde el primer momento puede ayudar a 
ahorrar tiempo más adelante. Si comienza a crear documentos sin pensar en la 
jerarquía a la que corresponden, puede terminar con una enorme carpeta llena de 
archivos y difícil de administrar, o con archivos relacionados repartidos por media 
docena de carpetas con nombres similares. 

Divida el sitio en categorías. Sitúe las páginas relacionadas en la misma carpeta. 
Por ejemplo, los comunicados de prensa de la compañía, la información sobre 
contactos y las ofertas de trabajo pueden colocarse en una carpeta, y las páginas del 
catálogo en línea pueden ir en otra. Utilice subcarpetas cuando sea necesario. 

Decida dónde desea colocar elementos como imágenes y archivos de sonido. Por 

ejemplo, es conveniente colocar todas las imágenes en un emplazamiento, a fin de 
facilitar su localización cuando quiera insertarlas en una página. Los diseñadores 
sitúan a veces todos los elementos que desean utilizar en un sitio y que son ajenos 
a HTML en una carpeta llamada Activos. La carpeta puede contener otras 
carpetas, como Imágenes, Shockwave y Sonidos. También se puede utilizar una 
carpeta Activos distinta para cada grupo de páginas relacionadas, si no hay muchos 
activos compartidos entre los grupos. 


Site 1 


Site 2 



Utilice la misma estructura para sitios locales y remotos. El sitio local y el sitio 
Web remoto deberán tener exactamente la misma estructura. Si crea un sitio local 
utilizando Dreamweaver y, a continuación, carga todo en el sitio remoto, 
Dreamweaver se asegurará de que la estructura local se duplique con precisión en 
el entorno remoto. 


Crear sitios y documentos 77 




























Planificar la exploración del sitio 

Otra área en la que merece la pena planificar es la exploración. Cuando diseñe su 
sitio, piense en la experiencia que le gustaría dar a sus visitantes. 

"Usted está aquí." En todo momento deberá resultar fácil a los visitantes saber en 
qué lugar del sitio se encuentran y cómo pueden volver a la página de nivel 
superior. 

Búsquedas e índices. Los visitantes deberán ser capaces de encontrar fácilmente la 
información que desean. 

Opinión. Ofrezca un medio por el que los visitantes puedan ponerse en contacto 
con el webmaster (en su caso) si algo marcha mal en el sitio o con los responsables 
de la compañía o el sitio. 

Utilice las herramientas de exploración de Dreamweaver como ayuda en el diseño 
de la exploración del sitio. Consulte “Crear vínculos y explorar”, en la página 109 
para obtener más información. 


Planificar el uso de plantillas y bibliotecas 

Las plantillas y bibliotecas de Dreamweaver permiten reutilizar diseños y 
elementos de página en distintos documentos. Sin embargo, resulta más difícil 
aplicar diseños y elementos reutilizables a una serie de páginas existentes que crear 
páginas utilizando dichos elementos desde el principio. 

Utilice plantillas. Si muchas de sus páginas utilizan el mismo diseño, planifique y 
diseñe una plantilla con ese diseño. A continuación, cree páginas a partir de la 
plantilla y, si decide cambiar el diseño de todas las páginas, cambie simplemente la 
plantilla. 

Nota: Los cambios que puede realizar en los documentos basados en plantillas están sujetos 
a algunas restricciones. Las plantillas se utilizan mejor en entornos de colaboración con el fin 
de garantizar que todos los usuarios emplean el mismo diseño de página. Los elementos de 
biblioteca pueden brindar una mayor flexibilidad de uso fuera de entornos de colaboración. 

Utilice elementos de biblioteca. Si sabe que una determinada imagen u otro 
elemento va a aparecer en muchas páginas del sitio, diseñe el elemento con 
antelación y conviértalo en un elemento de biblioteca. Si posteriormente cambia 
ese elemento, la nueva versión aparecerá en todas las páginas que lo contengan. 

Para obtener más información sobre la reutilización de diseños y elementos, 
consulte “Plantillas y bibliotecas”, en la página 357. 


Crear un sitio local 

Un sitio local —el área de almacenamiento local de los archivos del sitio Web— 
necesita un nombre y una carpeta raíz local donde se almacenen todos sus 
archivos. Cree un sitio local por cada sitio Web en el que trabaje. 
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La carpeta raíz local del sitio deberá ser específica de ese sitio. No use el disco ni la 

carpeta de la aplicación Dreamweaver como raíz del sitio. Una buena idea es crear 

una carpeta llamada Sitios y, posteriormente, crear carpetas raíz locales dentro de 

esa carpeta, una para cada sitio con el que trabaje. 

Para crear un sitio local: 

1 Elija Sitio > Nuevo sitio. 

En el cuadro de diálogo Definición de sitio que aparece estará seleccionada la 
categoría Datos locales. 

2 Introduzca las opciones siguientes: 

• En el campo Nombre del sitio, introduzca un nombre para el sitio. El nombre 
del sitio aparece en la ventana Sitio y en el submenú Sitio > Abrir sitio. Puede 
elegir el nombre que desee. 

• En el campo Carpeta raíz local, especifique la carpeta del disco duro en la que se 
desea almacenar los archivos, las plantillas y los elementos de biblioteca del 
sitio. Cuando Dreamweaver resuelve vínculos relativos a la raíz, lo hace 
tomando esta carpeta como raíz. (Consulte “Rutas relativas a la raíz”, en la 
página 113) Haga clic en el icono de carpeta para examinar y seleccionar la 
carpeta o introduzca una ruta y un nombre de carpeta en el campo de texto. Si 
aún no existe la carpeta raíz local, créela desde el cuadro de diálogo Examinar. 
Es posible que no pueda crear una carpeta en ese cuadro de diálogo si utiliza un 
ordenador Macintosh sin Navigation Services. 

• En la opción Actualizar lista archivos locales autom., indique si desea actualizar 
automáticamente la lista de archivos locales cada vez que copie archivos en el 
sitio local. Si desactiva esta opción, mejorará la velocidad de Dreamweaver a la 
hora de copiar esos archivos, pero el panel Local de la ventana Sitio no se 
actualizará automáticamente. Para actualizar manualmente la ventana Sitio, 
haga clic en el botón Actualizar de la misma. Para actualizar manualmente sólo 
el panel Local, elija Ver > Actualizar local en la ventana Sitio (Windows) o Sitio 
> Ver archivos del sitio > Actualizar local (Macintosh). 

• En el campo Dirección HTTP, introduzca el URL que utilizará el sitio Web 
finalizado, de modo que Dreamweaver pueda verificar los vínculos del sitio que 
utilicen URL absolutas. (Consulte “Comprobar vínculos entre documentos”, 
en la página 168.) Por ejemplo, la dirección HTTP del sitio Web de 
Macromedia es http://www.macromedia.com. 

• En la opción Caché, indique si desea crear caché local para mejorar la velocidad 
de las tareas de administración de vínculos y sitios. Si no selecciona esta opción, 
Dreamweaver volverá a preguntarle si desea utilizar caché antes de crear el sitio. 

3 Haga clic en Aceptar. 
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Posteriormente, cuando esté listo para publicar el sitio en un servidor remoto, 
deberá agregar información adicional sobre el sitio. Para obtener más información 
sobre los sitios remotos, consulte “Configurar un sitio remoto”, en la página 140. 


Editar y actualizar un sitio existente 

Puede utilizar Dreamweaver para copiar un sitio remoto existente (o una rama del 
mismo) en el disco local y editarlo, incluso aunque no haya utilizado 
Dreamweaver para crear el sitio original. 

Aunque sólo tenga la intención de editar una parte del sitio remoto, para evitar 
problemas deberá duplicar toda la estructura de la rama correspondiente del sitio, 
desde su carpeta raíz hasta los archivos que desea editar. Por ejemplo, si la carpeta 
raíz del sitio remoto, denominada public_html, contiene dos carpetas, Projectl y 
Project2, y desea trabajar únicamente con los archivos HTML de Projectl, no será 
necesario que descargue los archivos de Project2, pero deberá asignar su carpeta 
raíz local a public_html, no a Projectl. 


Remóte site 


Local site 


public_html 


Projectl 


local root folder 

(map this to public_html, not to 
Projectl or Projectl/HTML) 


Projectl 

(must be present on local 
site; corresponds to Projectl 
on remóte site) 


4 


HTML 

I (must be present on 
local site; corresponds 
to Projectl/HTML on 
remóte site) 


Project2 


I— HTML 
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Para editar un sitio Web existente: 

1 Configure un sitio local donde copiar el sitio remoto. Es decir, cree una carpeta 
local que contenga el sitio y configúrela como carpeta raíz local (consulte 
“Crear un sitio local”, en la página 78). 

2 Configure un sitio remoto utilizando información sobre el sitio existente. 
Consulte “Configurar un sitio remoto”, en la página 140. Compruebe que elige 
la carpeta raíz correcta para el sitio remoto. 

3 Conecte con el sitio remoto utilizando el botón Conectar de la ventana Sitio. 

4 Según la parte del sitio remoto que desee editar, lleve a cabo una de estas 
operaciones: 

• Si desea trabajar con el sitio completo, seleccione su carpeta raíz y haga clic en 
Obtener para descargar todo el sitio en el disco local. 

• Si desea trabajar sólo con uno de los archivos o de las carpetas del sitio, 
localícelo en el panel Remoto de la ventana Sitio y haga clic en Obtener para 
descargarlo en el disco duro. Dreamweaver duplica automáticamente la 
estructura del sitio remoto que sea necesaria para situar el archivo descargado 
en el lugar adecuado de la jerarquía del sitio. Para editar únicamente una parte 
de un sitio, generalmente debe descargar los archivos dependientes. 

5 Proceda como si estuviera creando un sitio a partir de cero: edite documentos, 
realice una vista previa y una prueba con ellos y vuelva a cargarlos en el sitio 
remoto. 


Ver y abrir archivos en la ventana Sitio 

Utilice la ventana Sitio para ver sitios locales y remotos, agregar o eliminar 
documentos y diseñar la estructura de exploración con un mapa del sitio. Para 
obtener más información, consulte “Ventana Sitio”, en la página 144. 

Puede definir los dos paneles de la ventana Sitio para que muestren el sitio local, el 
sitio remoto o un mapa gráfico del sitio local. Por ejemplo, puede ver el sitio local 
en un panel y el remoto en el otro. También puede ver el sitio local en vista de 
archivos en un panel y en vista de mapa en el otro. Para obtener más información 
sobre mapas de sitio, consulte “Ver la estructura del sitio”, en la página 127. 


Ver sitios locales 

La ventana Sitio permite mostrar el contenido de sitios locales y remotos. Los 
sitios locales se muestran en forma de lista de archivos, de mapa visual o de ambas 
formas. Los sitios remotos sólo se muestran en forma de lista de archivos. Para ver 
un sitio remoto, deberá configurarlo. Consulte “Configurar un sitio remoto”, en la 
página 140. 
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Para ver los archivos de un sitio local, lleve a cabo una de estas operaciones: 

• Elija Ventana > Archivos del sitio. 

• En la ventana Sitio, si se muestra el mapa del sitio, haga clic en el botón 
Archivos del sitio. 



Archivo Edición Ver Sitio V 



El panel que muestra los archivos de un sitio local está etiquetado como 
“Carpeta local”, mientras que el panel que muestra los archivos de un sitio 
remoto está etiquetado como “Sitio remoto”. 

Nota: Si está viendo un sitio local que carece de correspondencia con un sitio remoto, el 
panel "Sitio remoto" estará vacío. 


Para ver el mapa y los archivos del sitio, lleve a cabo una de estas operaciones: 

• Elija Ventana > Mapa del sitio. Si anteriormente sólo ha visto el mapa, sin los 
archivos del sitio, se mostrará el mapa únicamente. 

• En la ventana Sitio, haga clic en el botón Mapa del sitio o mantenga pulsado el 
botón del ratón con el cursor sobre el botón Mapa del sitio y seleccione Mapa y 
archivos en el menú emergente. 


^ Sitio - avocado8 


Archivo Edición Ver Sitio V 



Mapa y archivos 


El panel que muestra el sitio local como mapa está etiquetado como 
“Exploración del sitio”, mientras que el otro panel muestra los archivos del sitio 
local (con la etiqueta “Carpeta local”) o los archivos del sitio remoto (con la 
etiqueta “Sitio remoto”), de acuerdo con las preferencias establecidas en 
Mostrar siempre. 
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Para ver sólo el mapa del sitio: 

Mantenga pulsado el botón del ratón con el cursor sobre el botón Mapa del sitio y 
seleccione Sólo mapa en el menú emergente. 


Cambiar la visualización del sitio 

De forma predeterminada, el sitio remoto (o el mapa del sitio local) aparece en el 

panel izquierdo de la ventana Sitio y el sitio local, en el derecho. Puede alternar 

estas visualizaciones. 

Para determinar en qué panel debe aparecer el sitio local y el sitio remoto: 

1 Elija Edición > Preferencias y seleccione la categoría FTP del sitio. 

2 Lleve a cabo una de estas operaciones: 

• Seleccione Archivos locales en el menú Mostrar siempre y especifique si los 
archivos locales deben mostrarse en el panel derecho de la ventana Sitio o en el 
izquierdo. 

El sitio local aparecerá en el panel seleccionado y el sitio remoto (o el mapa del 
sitio), en el panel opuesto. Al elegir esta opción, los archivos del sitio local se 
muestran siempre en la ventana Sitio, incluso cuando la ventana se reduce a un 
panel. 

• Seleccione Archivos remotos en el menú Mostrar siempre y especifique si los 
archivos remotos deben mostrarse en el panel derecho de la ventana Sitio o en 
el izquierdo. 

El sitio remoto aparecerá en el panel seleccionado y el sitio remoto (o el mapa 
del sitio, que siempre es local), en el panel opuesto. Al elegir esta opción, los 
archivos del sitio remoto se muestran siempre en la ventana Sitio, incluso 
cuando la ventana se reduce a un panel. 

3 Haga clic en Aceptar para cerrar el cuadro de diálogo Preferencias y aplicar los 
cambios. 

Para cambiar el área de visualización: 

En la ventana Sitio, lleve a cabo una de estas operaciones: 

• Arrastre la barra que separa los paneles para aumentar o reducir el área de 
visualización del panel derecho o izquierdo de la ventana. 

• Use las barras de desplazamiento situadas en la parte inferior de los paneles para 
desplazar el contenido de los paneles. 

• En el mapa del sitio, arrastre la flecha situada encima de un archivo para 
cambiar el espacio entre filas. 
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Para contraer la ventana Sitio a un panel: 

Haga clic en el pequeño botón de triángulo de la parte izquierda de la ventana 
Sitio. 

Nota: El panel que permanece visible es el que ha elegido en el cuadro de diálogo 
Preferencias de FTP del sitio para mostrar siempre. 

Para obtener más información sobre las preferencias del sitio, consulte 
“Configurar preferencias de FTP del sitio”, en la página 146. 


Trabajar con archivos del sitio 

Use Ver archivos del sitio para ver los sitios local y remoto como listas de archivos, 
para abrir archivos, para agregar nuevas carpetas o archivos a un sitio o para 
actualizar la vista de un sitio después de realizar cambios. También puede utilizar 
Ver archivos del sitio para determinar qué archivos (de ambos sitios) se han 
actualizado desde la última vez que se transfirieron. Para obtener información 
sobre la sincronización del sitio local con el remoto, consulte “Sincronizar los 
archivos de los sitios locales y remotos”, en la página 154. 

Para ver los archivos del sitio: 

Lleve a cabo una de estas operaciones: 

• Elija Ventana > Archivos del sitio para abrir la ventana Sitio en Ver archivos del 
sitio. 

• En la ventana Sitio, haga clic en el botón Archivos del sitio. 

Para abrir un archivo en Ver archivos del sitio: 

Haga doble clic en el icono del archivo. 

Para agregar una nueva carpeta a un sitio: 

1 Compruebe que el archivo o la carpeta está seleccionado en la ventana Sitio. La 
carpeta se creará dentro de la carpeta seleccionada o en la carpeta donde se 
encuentra el archivo seleccionado actualmente. 

2 Elija Archivo > Nueva carpeta en la ventana Sitio (Windows) o Sitio > Ver 
archivos del sitio > Nueva carpeta (Macintosh). 

3 Introduzca un nombre para la nueva carpeta. 
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Para agregar un nuevo archivo a un sitio: 

1 Compruebe que el archivo o la carpeta están seleccionados en la ventana Sitio. 
El archivo se creará dentro de la carpeta seleccionada o en la carpeta donde se 
encuentra el archivo seleccionado actualmente. 

2 Elija Archivo > Nuevo archivo en la ventana Sitio (Windows) o Sitio > Ver 
archivos del sitio > Nuevo archivo (Macintosh). 

3 Introduzca un nombre para el nuevo archivo. 

Para actualizar la ventana Ver archivos del sitio después de realizar cambios fuera 
de Dreamweaver: 

Lleve a cabo una de estas operaciones: 

• Elija Ver > Actualizar local en la ventana Sitio (Windows) o Sitio > Ver archivos 
del sitio > Actualizar local (Macintosh). 

• Elija Ver > Actualizar remoto en la ventana Sitio (Windows) o Sitio > Ver 
archivos del sitio > Actualizar remoto (Macintosh). 

• Haga clic en el botón Actualizar de la ventana Sitio para actualizar los dos 
paneles. 

Para localizar y seleccionar los archivos locales más recientes: 

Elija Edición > Seleccionar local más reciente en la ventana Sitio (Windows) o 
Sitio > Ver archivos del sitio > Seleccionar local más reciente (Macintosh). 

Para localizar y seleccionar los archivos remotos más recientes: 

Elija Edición > Seleccionar remoto más reciente en la ventana Sitio (Windows) o 
Sitio > Ver archivos del sitio > Seleccionar remoto más reciente (Macintosh). 

Para obtener más información acerca de la manipulación de sitios locales y 
remotos, consulte “Usar el sistema de desprotección/protección”, en la 
página 148. 


Crear sitios y documentos 85 



Quitar un sitio de la lista de sitios 

Si no desea seguir trabajando con un sito en Dreamweaver puede quitarlo de la 
lista de sitios. Los archivos no desaparecen del sitio. 

Nota: Cuando se quita un sitio de la lista, toda su información de configuración se pierde de 
forma permanente. 


Para quitar un sitio de la lista de sitios: 

1 Elija Sitio > Definir sitios. 

2 Seleccione el nombre de un sitio. 

3 Haga clic en Quitar. 

Aparecerá un cuadro de diálogo pidiendo confirmación. 

4 Haga clic en Sí para quitar el sitio de la lista. 

Crear y editar documentos HTML 

Una vez configurado el sitio, puede comenzar a crear los documentos (páginas) 
que lo constituyen. Si aún no ha configurado un sitio, consulte “Crear un sitio 
local”, en la página 78. 

En Dreamweaver puede crear documentos HTML en blanco o abrir documentos 
HTML existentes independientemente de cómo se hayan creado. También puede 
crear un documento a partir de una plantilla. 

Nota: Cuando guarde los documentos, evite utilizar espacios y caracteres especiales en los 
nombres de archivo y carpeta siempre que esto sea posible. 


Para crear un documento HTML en blanco en una ventana de documento nueva: 

Elija Archivo > Nuevo desde una ventana de documento existente (Windows) o 
desde la barra de menú principal (Macintosh). 

Si abre el inspector de código fuente HTML (elija Ventana >Fuente HTML), 
podrá ver que el nuevo documento no está totalmente en blanco, pues contiene 
etiquetas HTML, HEAD y BODY para que pueda comenzar a trabajar. Mientras escribe 
en la ventana de documento o inserta objetos tales como tablas e imágenes, puede 
dejar abierto el inspector de código fuente HTML y observar cómo se crea el 
código fuente HTML. Para obtener más información sobre el inspector de código 
fuente HTML, consulte “Utilizar el inspector de código Fuente HTML”, en la 
página 336. 
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Nota: No utilice caracteres especiales (como é, g o ¥) ni signos de puntuación (como dos 
puntos, guiones o puntos) en los nombres de los archivos que tiene previsto colocar en un 
servidor remoto. Muchos servidores convierten estos caracteres durante la transferencia, lo 
que rompe los vínculos con los archivos. 


Para abrir un archivo HTML existente, lleve a cabo una de estas operaciones: 

• Seleccione Archivo > Abrir. 

• Si el archivo se ha creado con Microsoft Word, elija Archivo > Importar > 
Importar HTML de Word. 

Dreamweaver abrirá el archivo y quitará el código HTML sobrante o 
innecesario que genera Word. Microsoft Word 97 y las versiones posteriores 
cuentan con el comando Guardar como HTML, que agrega código HTML 
adicional al convertir un documento a este formato. Para obtener más 
información, consulte “Limpiar HTML de Microsoft Word”, en la página 350. 

Nota: No se puede importar directamente un archivo de Microsoft Word (.doc) en 
Dreamweaver. Si desea importar el contenido de un archivo de Word, inicie Word y 
guarde el archivo como HTML antes de importarlo en Dreamweaver. 


Para crear un documento basado en una plantilla: 

1 Elija Archivo > Nuevo desde plantilla. 

Aparecerá un cuadro de diálogo con las plantillas disponibles para el sitio 
actual. Deberá crear plantillas antes de crear documentos basados en ellas 
(consulte “Crear plantillas”, en la página 359). 

Cuando crea un documento basado en una plantilla, algunas partes del 
documento quedan bloqueadas para que no puedan modificarse. El archivo de 
plantilla determina qué partes son editables y cuáles no. Esto garantiza la 
coherencia en el uso de la plantilla en múltiples documentos de un mismo sitio. 

2 Seleccione una plantilla y haga clic en Seleccionar. 

Para modificar las partes editables de la plantilla, seleccione el contenido del 
marcador de posición y sobrescríbalo. Las partes no editables de la plantilla se 
identifican mediante un color de resaltado. Para personalizar los colores de 
resaltado, consulte “Configurar preferencias de plantilla”, en la página 361. 

Para conocer más detalles sobre el diseño y la manipulación de plantillas, consulte 
“Plantillas y bibliotecas”, en la página 357. 
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Agregar texto e insertar objetos 

Agregue contenido a sus páginas escribiendo o pegando texto e insertando objetos 
tales como imágenes, tablas y capas. 

Para agregar texto al documento, lleve a cabo una de las siguientes operaciones: 

• Escriba texto directamente en la ventana de documento. 

• Copie texto de otra aplicación, pase a Dreamweaver, coloque el punto de 
inserción en la ventana de documento y elija Edición > Pegar como texto. 
Dreamweaver no mantiene el formato de texto aplicado en la otra aplicación, 
pero conserva los saltos de línea. 

Para obtener más información acerca de cómo aplicar formato al texto, consulte 
“Aplicar formato al texto”, en la página 177. 


Para insertar tablas, imágenes y otros objetos en el documento, lleve a cabo una 

de las siguientes operaciones: 

• Use los comandos del menú Insertar para insertar los objetos especificados en la 
posición actual del punto de inserción en el documento. 

• Elija Ventana > Objetos para abrir la paleta de objetos. Localice el tipo de 
objeto que desea y haga clic en el objeto o arrástrelo para insertarlo en la 
ventana de documento. 

Para la mayoría de los objetos aparece un cuadro de diálogo en el que puede 
seleccionar opciones o el archivo deseado. Para ocultar el cuadro de diálogo, 
elija Edición > Preferencias, seleccione General y desactive la opción Mostrar 
diálogo al insertar objetos. 

Nota: Para insertar múltiples espacios consecutivos, utilice Insertar > Espacio indivisible. 

Pero si lo que desea es alinear los elementos en columnas, utilice una tabla. 
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Insertar fechas 


Dreamweaver proporciona un objeto Fecha que permite insertar la fecha actual 
con el formato que prefiera y ofrece la posibilidad de actualizarla cada vez que 
guarde el archivo. 

Para insertar la fecha actual en un documento: 

1 En la ventana de documento, coloque el punto de inserción en el lugar en el 
que desea insertar la fecha. 

2 Lleve a cabo una de estas operaciones: 

• Elija Insertar > Fecha. 

• Abra la paleta de objetos eligiendo Ventana> Objetos y, a continuación, abra el 
panel Común y haga clic en el botón Fecha. 

3 En el cuadro de diálogo que aparece, seleccione el formato de día de la semana, 
fecha y hora. 

4 Si desea que la fecha insertada se actualice cada vez que guarde el documento, 
seleccione Actualizar automáticamente al guardar. Si desea que la fecha se 
convierta en texto normal cuando se inserte y no se actualice automáticamente, 
desactive esa opción. 

5 Haga clic en Aceptar para insertar la fecha. 

Caracteres especiales 

Algunos caracteres especiales se representan en HTML mediante un nombre o un 
número, denominado entidad. HTML incluye nombres de entidad para caracteres 
como el símbolo de copyright (&copy;) el signo & (&amp;) y el símbolo de marca 
comercial registrada (&reg;). Cada entidad tiene un nombre (como &mdash;) y un 
equivalente numérico (como &#1 51;). 

Desgraciadamente, muchos exploradores (especialmente, los productos más 
desfasados y de marcas distintas a Navigator e Internet Explorer) no muestran 
correctamente muchas de las entidades con nombre. La mayoría de los 
exploradores muestran las entidades numéricas más utilizadas, pero resulta más 
difícil recordar el número de una entidad que su nombre. 

Para obtener una lista de nombres y números de entidad, consulte el URL de la 
tabla de entidades que se indica en “Recursos técnicos HTML y Web”, en la 
página 19. 
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Insertar caracteres especiales 

Puede insertar varios caracteres especiales (con forma de entidades HTML) 
utilizando el panel Caracteres de la paleta de objetos. 

Para insertar un carácter especial en un documento: 

1 En la ventana de documento, coloque el punto de inserción en el lugar en el 
que desea insertar un carácter especial. 

2 Lleve a cabo una de estas operaciones: 

• Elija el nombre del carácter en el submenú Insertar > Caracteres. 

• Abra la paleta de objetos (eligiendo Ventana > Objetos), seleccione el panel 
Caracteres y elija un carácter de la lista. 

Hay otros muchos caracteres especiales. Para seleccionar uno de ellos, elija Insertar 
> Caracteres > Más y seleccione un carácter. A continuación, haga clic en Aceptar. 


Utilización de reglas horizontales 

Las reglas horizontales (líneas) son útiles para organizar la información. Puede 

separar visualmente el texto y los objetos de una página con una o más reglas. 

Para crear una regla horizontal: 

1 En la ventana de documento, coloque el punto de inserción en el lugar en el 
que desea insertar una regla horizontal. 

2 Lleve a cabo una de estas operaciones: 

• Elija Insertar > Regla horizontal. 

• Elija Ventana > Objetos para abrir la paleta de objetos y, seguidamente, haga 
clic en el botón Regla horizontal. 

Para modificar una regla horizontal: 

1 En la ventana de documento, seleccione la regla horizontal. 

2 Elija Ventana > Propiedades para abrir el inspector de propiedades y modificar 
las propiedades que desee. 
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Seleccionar elementos en la ventana de 
documento 


Normalmente, para seleccionar un elemento sólo es necesario hacer clic en él. Si 
un elemento es invisible, es posible que tenga que convertirlo en visible para poder 
seleccionarlo. 

Utilice estas técnicas para seleccionar elementos: 

• Para seleccionar un elemento visible de la ventana de documento, arrastre el 
cursor sobre el elemento o haga clic en él. 

• Para seleccionar un elemento invisible, elija Ver > Elementos invisibles (si no 
está seleccionado) y haga clic en el marcador del elemento. Consulte 
“Elementos invisibles”, en la página 92. 

Algunos objetos aparecen en un lugar de la página distinto a aquél en el que se 
ha insertado el código. Por ejemplo, una capa puede situarse en cualquier lugar 
de la página, pero el código que define la capa se encuentra en un lugar fijo. 
Dreamweaver muestra marcadores en la ventana de documento para indicar la 
posición del código correspondiente a los elementos invisibles. 

• Para seleccionar una etiqueta completa (incluido su contenido, si lo hay), haga 
clic en una etiqueta del selector de etiquetas, situado en la parte inferior 
izquierda de la ventana de documento. El selector de etiquetas siempre muestra 
las etiquetas que rodean la selección o la posición del punto de inserción. 


<body> <table> <tr> <td> <b> 544 X 378 ▼ 1K/1s QJ ( vD (D O 


Selector de etiquetas 

Por ejemplo, si ha definido un vínculo para una imagen, el código HTML del 
inspector de código fuente tendrá una apariencia semejante a ésta: 

<a href="http://www.macromedia.com"x¡mg src="agraphic.g¡f"> </a> 

Al hacer clic en la imagen de la ventana de documento, se seleccionará la 
etiqueta <¡mg> en el selector de etiquetas, lo que equivale a seleccionar <¡mg 
src="agraph¡c.gif"> en el inspector de código fuente HTML. 

Para seleccionar el vínculo, haga clic en la imagen de la ventana de documento 
y luego haga clic en la <a> que aparece en el selector de etiquetas, a la izquierda 
de <¡mg>. 

Para ver el código HTML asociado al texto u objeto seleccionado, elija Ventana > 
Fuente HTML para abrir el inspector de código fuente HTML. Las selecciones 
que realice en el inspector de código fuente HTML se reflejarán en la ventana de 
documento. 
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Elementos invisibles 


Elija Ver > Elementos invisibles para mostrar u ocultar en la ventana de 
documento los marcadores que representan elementos invisibles, como son 
formularios, puntos de fijación con nombre, comentarios y secuencias de 
comandos. Al mostrar los elementos invisibles, podrá seleccionarlos, verlos y 
cambiar sus propiedades en el inspector de propiedades. 

Los marcadores de elementos que aparecen al elegir Ver > Elementos invisibles 
dependen de la configuración del panel Elementos invisibles del cuadro de diálogo 
Preferencias. Por ejemplo, puede especificar que sean visibles los puntos de fijación 
con nombre, pero no los saltos de línea. Consulte “Configurar preferencias de 
elementos invisibles”, en la página 92. 

Puede crear determinados elementos invisibles (como comentarios, puntos de 
fijación con nombre y secuencias de comandos) utilizando los botones del panel 
Invisibles de la paleta de objetos. Puede modificar estos elementos utilizando el 
inspector de propiedades. Consulte “Usar la paleta de objetos”, en la página 70. 

Configurar preferencias de elementos invisibles 

Utilice las preferencias de elementos invisibles para seleccionar qué tipos de 
elementos estarán visibles al seleccionar Ver > Elementos invisibles. Los elementos 
invisibles como secuencias de comandos, comentarios y puntos de fijación con 
nombre se representan mediante marcadores en la ventana de documento. Al 
mostrar los elementos invisibles podrá seleccionar estos marcadores y cambiar las 
propiedades de los elementos en el inspector de propiedades. 

Para cambiar las preferencias de los elementos invisibles: 

1 Elija Edición > Preferencias y, a continuación, haga clic en Elementos invisibles. 

2 Seleccione los elementos que deberán ser visibles. Una marca de verificación 
junto al nombre del elemento en el cuadro de diálogo indica que ese elemento 
se encontrará visible cuando seleccione Ver > Elementos invisibles. 

Para obtener una descripción de cada una de las preferencias de Elementos 
invisibles, consulte la Ayuda de Dreamweaver. 


Elegir colores 

En Dreamweaver, muchos de los cuadros de diálogo, así como el inspector de 
propiedades de muchos elementos de página, contienen un cuadro de color que 
abre una paleta de colores. Utilícela para elegir el color de un elemento. 
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Para elegir un color en Dreamweaver: 

1 Elija un cuadro de color en cualquier cuadro de diálogo o en el inspector de 
propiedades. 

Cuadro de color 



2 Lleve a cabo una de estas operaciones: 

• Use el cuentagotas para seleccionar un color de la paleta. Todos los colores de la 
paleta son seguros para la Web. 

• Utilice el cuentagotas para seleccionar un color en cualquier punto del monitor 
del ordenador, incluso fuera de las ventanas de Dreamweaver. Si hace clic en el 
escritorio u otra aplicación, Dreamweaver recogerá el color donde haya hecho 
clic, pero es posible que se active la otra aplicación. En tal caso, haga clic en una 
ventana de Dreamweaver para seguir trabajando con él. 

• Para limitar la selección a colores seguros para la Web, active el botón de 
cuentagotas de colores seguros para la Web. Cuando esta opción está activada, 
el color seleccionado cambiará por el color seguro para la Web más próximo. 
Haga clic en este botón para desactivar esta opción. 



• Haga clic en el botón de borrador para eliminar el color actual sin elegir otro 
diferente. 

• Haga clic en el botón de paleta para abrir el selector de colores del sistema. El 
color elegido en el selector de colores del sistema no cambiará al color seguro 
para la Web más próximo, incluso aunque el cuentagotas está activo. 
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Colores seguros para la Web 

En HTML, los colores se expresan en forma de valores hexadecimales (por 
ejemplo, #FFOOOO) o con nombres (red). Los colores comunes a Netscape 
Navigator y Microsoft Internet Explorer en los sistemas Windows y Macintosh en 
el modo de 256 colores se denominan seguros para la Web. Suele decirse que existen 
216 colores comunes y que cualquier valor hexadecimal que combine los pares 00, 
33, 66, 99, CC o FF (valores RGB 0, 51, 102, 153, 204 y 255, respectivamente) 
representa un color seguro para la Web. 

Al realizar pruebas, sin embargo, se descubre que hay sólo 212 colores seguros para 
la Web. Internet Explorer en Windows no muestra correctamente los colores 
#0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) y #33FF00 
(51,255,0). 

Todos los selectores de colores de Dreamweaver utilizan la paleta de 212 colores 
seguros para la Web; al seleccionar un color de la paleta, se muestra el valor 
hexadecimal correspondiente al color. Si bien los cuatro colores mencionados 
anteriormente no están incluidos en la paleta de colores seguros para la Web de 
Dreamweaver, puede editar manualmente los valores hexadecimales de cualquier 
campo de color si desea utilizarlos. 

Para elegir un color no incluido en la gama segura para la Web, haga clic en el 
botón de paleta, situado en la esquina inferior derecha del selector de colores de 
Dreamweaver, y abra el selector de colores del sistema. El selector de colores del 
sistema no se limita a los colores seguros para la Web. 

Las versiones de Netscape Navigator para UNIX usan una paleta de colores 
distinta a la de las versiones para Windows y Macintosh. Si está desarrollando el 
sitio Web para equipos UNIX exclusivamente (o si los destinatarios serán usuarios 
de Windows o Macintosh con monitores de 24 bits y de UNIX con monitores de 
8 bits), es recomendable utilizar valores hexadecimales que combinen los pares 00, 
40, 80, BF o FF para lograr colores seguros para la Web en SunOS. 
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Configurar las propiedades del documento 

Los títulos de página, las imágenes y colores de fondo y los colores del texto y los 
vínculos son propiedades básicas de los documentos HTML. Los títulos de página 
identifican y dan nombre a los documentos. Las imágenes y los colores de fondo 
definen la apariencia global del documento. Los colores del texto ayudan a los 
usuarios a distinguir entre el texto normal y el hipertexto, así como a reconocer 
qué vínculos han visitado y cuáles no. 


Cambiar el título de una página 

El título de una página HTML ayuda a los usuarios a realizar un seguimiento de 
lo que ven mientras están explorando; también identifica la página en listas de 
historial y de marcadores. Si no asigna ningún título a una página, ésta aparecerá 
en la ventana del explorador y en las listas de marcadores y de historial como 
Documento sin título. Asignar un nombre de archivo al documento (al guardarlo) 
no equivale a asignar un título a la página. 

Para cambiar el título de una página: 

1 Lleve a cabo una de estas operaciones: 

• Elija Modificar > Propiedades de la página. 

• Elija Propiedades de la página en el menú contextual haciendo clic con el botón 
izquierdo del ratón (Windows) o pulsando Control mientras hace clic en la 
ventana de documento (Macintosh). 

• Elija Ver > Contenido de Head y haga clic en el botón Título cuando aparezca 
éste. Abra el inspector de propiedades para editar el título. 

2 Introduzca el título de la página en el cuadro Título. 

3 Si está utilizando el cuadro de diálogo Propiedades de la página en lugar del 
inspector de propiedades, haga clic en Aceptar. 

El título aparecerá en la barra de estado de la ventana de documento. El 
nombre de archivo de la página y la carpeta en la que está guardado el archivo 
aparecen entre paréntesis junto al título. 
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Definir una imagen de fondo o un color de página 

Utilice el cuadro de diálogo Propiedades de la página para definir una imagen o un 
color para el fondo de la página. Si utiliza tanto una imagen como un color de 
fondo, el color aparecerá mientras se descarga la imagen. Si la imagen de fondo 
contiene píxeles transparentes, el color de fondo se verá a través de ellos. 

Para definir una imagen o un color de fondo: 

1 Elija Modificar > Propiedades de la página o seleccione Propiedades de la 
página en el menú contextual de la ventana de documento. 

2 Establezca una imagen y/o un color de fondo. 

• Haga clic en el botón Examinar (Windows) o el botón Seleccionar (Macintosh) 
para buscar y seleccionar la imagen o introduzca la ruta de la imagen de fondo 
en el cuadro Imagen de fondo. 

Dreamweaver forma un mosaico con la imagen de fondo (la repite) si ésta no 
ocupa toda la ventana, como hacen los exploradores. 

• Utilice un color de fondo del cuadro Color de fondo. 

Consulte “Elegir colores”, en la página 92. 


Definir colores predeterminados de texto 

Defina colores predeterminados para el texto normal, los vínculos, los vínculos 
visitados y los vínculos activos en el cuadro de diálogo Propiedades de la página, o 
bien elija una combinación de colores preestablecida para definir los colores del 
fondo de la página y del texto. Para obtener más información, consulte “Elegir 
colores”, en la página 92. 

Nota: El color del vínculo activo es el que adopta el vínculo cuando se hace clic en él. 


Para definir los colores predeterminados del texto, lleve a cabo una de las 
operaciones siguientes: 

• Elija Modificar > Propiedades de la página y, seguidamente, seleccione colores 
para las opciones Color del texto, Color de los vínculos, Vínculos visitados y 
Vínculos activos. 

• Elija Comandos > Definir combinación de colores y seleccione un color de 
Fondo y una combinación de colores de Texto y vínculos. 

El cuadro de muestra da una idea de cuál será la apariencia de la combinación 
de colores en el explorador. 
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Paleta de marcador 


Pasos. 

Pulgar (control 
deslizante) 

Botón Reproducir 


La paleta de marcador muestra una lista de todos los pasos dados en el documento 
activo desde que éste se ha creado o abierto. La paleta de marcador no muestra los 
pasos dados en otros marcos, en otras ventanas de documento o en la ventana 
Sitio. Permite deshacer uno o varios pasos, así como repetir pasos y crear nuevos 
comandos para automatizar tareas repetitivas. 



Botón Copiar pasos Botón Guardar como comando 


El control deslizante, o el pulgar, de la paleta de marcador señala inicialmente el 
último paso que ha dado. 

Nota: No se puede modificar el orden de los pasos en la paleta de marcador. La paleta de 
marcador no es un conjunto arbitrario de comandos, sino una forma de ver los pasos en el 
orden en que se han dado. 


Para definir el número de pasos que la paleta de marcador mantiene y muestra: 

1 Elija Edición > Preferencias y seleccione General en la lista Categoría. 

2 Introduzca un número para Número máximo de pasos de marcador. 

El valor predeterminado suele ser válido para la mayoría de las necesidades de 
los usuarios. Cuanto mayor sea el número, más memoria necesitará la paleta de 
marcador. Si supera el número máximo de pasos definido para la paleta de 
marcador, se descartarán los primeros pasos. 

Para borrar la lista de la paleta de marcador para el documento actual: 

En el menú contextual de la paleta de marcador, elija Borrar marcador. 

Este comando también borra toda la información de deshacer del documento 
actual. Después de elegir Borrar marcador, no podrá recuperar los pasos borrados. 
La opción Borrar marcador no deshace los pasos dados, sino que simplemente 
quita el registro de esos pasos de la memoria de Dreamweaver. 
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Deshacer cambios 


Para deshacer la última operación realizada en un documento, elija Edición > 
Deshacer como en cualquier otra aplicación. El nombre del comando Deshacer 
cambiará en el menú Edición para reflejar la última operación realizada. Para 
deshacer varios pasos al mismo tiempo, utilice la paleta de marcador. 

Para abrir la paleta de marcador: 

Elija Ventana > Marcador. 

Para deshacer el último paso: 

Arrastre el pulgar hasta el paso situado inmediatamente por encima en la lista de la 
paleta de marcador. Esta operación tiene el mismo efecto que elegir Edición > 
Deshacer. 

El paso deshecho adopta el color gris. 

Para deshacer varios pasos al mismo tiempo, lleve a cabo una de estas 
operaciones: 

• Arrastre el pulgar para señalar cualquier paso. 

• Haga clic a la izquierda de un paso. El pulgar se desplazará automáticamente a 
ese paso. 

Nota: Para desplazarse automáticamente a un determinado paso, deberá hacer clic a la 
Izquierda del mismo. De este modo, se seleccionará el paso. Seleccionar un paso no es lo 
mismo que volver a ese paso en el historial de deshacer. 



Como ocurre al deshacer un solo paso, si deshace una serie de pasos y, a 
continuación, realiza una nueva operación en el documento, no podrá rehacer los 
pasos deshechos, pues habrán desaparecido de la paleta de marcador. 

La paleta de marcador también permite repetir los pasos que aparecen en el 
historial de pasos, así como automatizar tareas a partir de los pasos dados. 
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Automatizar tareas 


Para repetir una serie de pasos unas pocas veces, reprodúzcalos directamente desde 
la paleta de marcador. Para automatizar una tarea que realiza a menudo, cree un 
comando que lleve a cabo esa tarea de manera automática. 

Algunos movimientos del ratón, como hacer clic o arrastrar para seleccionar algún 
elemento de la ventana de documento, no se pueden reproducir ni guardar con los 
comandos. Al realizar un movimiento de ese tipo, aparece una línea negra en la 
paleta de marcador (si bien esa línea no es aparente hasta que realice otra acción). 
Para evitar este problema, utilice las teclas de flecha en lugar del ratón para mover 
el punto de inserción dentro de la ventana de documento. Por otra parte, hay 
algunos pasos que no se pueden repetir, como arrastrar un elemento a otro lugar 
de la página. Al dar un paso de ese tipo, aparece un icono de comando de menú 
con una pequeña X roja en la paleta de marcador. 

Al reproducir los pasos, se ejecutan tal como lo hicieron anteriormente. No puede 
modificarlos mientras los reproduce. Por ejemplo, si anteriormente ha cambiado a 
rojo el color de la celda de una tabla y aplica ese paso a otra celda de la tabla, 
también cambiará el color de dicha celda. Sin embargo, no puede especificar un 
color distinto al aplicar la definición de color de fondo a otra imagen. 


Repetir pasos 

Para repetir el último paso que ha dado, utilice el comando Edición > Repetir. El 
nombre de este comando cambia en el menú Edición para reflejar el último paso 
que ha dado. Por ejemplo, si ha escrito texto, el nombre del comando será Repetir 
Escritura. No se puede utilizar el comando Repetir inmediatamente después de 
una operación de deshacer o de rehacer. 

Para repetir pasos que no sean el más reciente o para repetir varios pasos al mismo 
tiempo, utilice la paleta de marcador. 

Para repetir un paso: 

En la paleta de marcador, seleccione el paso y haga clic en el botón Reproducir. El 
paso se reproducirá y aparecerá una copia suya en la paleta de marcador. 

Para repetir una serie de pasos adyacentes: 

1 Seleccione los pasos en la paleta de marcador mediante una de estas operaciones: 

• Arrastre desde un paso hasta otro. 

• Seleccione un paso y, a continuación, haga clic en el paso situado en el otro 
extremo de la serie mientras pulsa la tecla Mayús. 

2 Haga clic en Reproducir. 

Los pasos se reproducirán en orden y aparecerá un nuevo paso en la paleta de 
marcador, con la etiqueta Reproducir pasos. 
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Para repetir pasos no adyacentes: 

1 Seleccione un paso y, a continuación, haga clic en otros pasos mientras pulsa la 
tecla Control (Windows) o la tecla Comando (Macintosh). 

2 Haga clic en Reproducir. 

Los pasos se reproducirán en orden y aparecerá un nuevo paso en la paleta de 
marcador, con la etiqueta Reproducir pasos. 

Observe que al reproducir pasos, los pasos que se reproducen son los que están 
seleccionados, no necesariamente el que está señalado actualmente por el pulgar. 

Aplicar pasos a otros objetos 

Puede aplicar una serie de pasos de la paleta de marcador a cualquier objeto de la 
ventana de documento. 

Para aplicar los pasos de la paleta de marcador a un objeto nuevo: 

1 Seleccione el objeto. 

2 Seleccione el paso o los pasos relevantes en la paleta de marcador y, a 
continuación, haga clic en Reproducir. 

Si selecciona múltiples objetos en un documento y, a continuación, les aplica 
pasos desde la paleta de marcador, los objetos se considerarán como una selección 
única. No puede seleccionar cinco imágenes, por ejemplo, y aplicar el mismo 
cambio de tamaño a cada una de ellas a la vez. 

Para aplicar una serie de pasos a cada objeto de un conjunto, compruebe que el 
último paso de la serie selecciona el siguiente objeto del conjunto. Por ejemplo, 
este procedimiento establece el espaciado vertical y horizontal de una serie de 
imágenes: 


Para establecer el espaciado vertical y horizontal de una serie de imágenes: 

1 Comience con un documento en el que cada línea contenga una pequeña 
imagen (por ejemplo, una viñeta gráfica) seguida de texto. El objetivo es separar 
las imágenes del texto y de otras imágenes situadas por encima y por debajo de 
ellas. 

2 Seleccione la primera imagen. 

3 En el inspector de propiedades, haga clic en el botón de ampliación (la flecha 
de la esquina inferior derecha) si es necesario para ver todas las propiedades de 
la imagen. 

4 Introduzca números en los campos de texto Espacio V y Espacio H para definir 
el espaciado de la imagen. 
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5 Haga clic en la barra de título de la ventana de documento (en lugar de hacerlo 
dentro de la ventana de documento) para devolver el enfoque del teclado a la 
ventana de documento. 

6 Pulse la tecla Flecha izquierda para mover el punto de inserción a la izquierda 
de la imagen. A continuación, pulse la tecla Flecha abajo para mover el punto 
de inserción una línea hacia abajo, dejándolo justo a la izquierda de la segunda 
imagen de la serie. Seguidamente, pulse Mayús+Flecha derecha para seleccionar 
esa segunda imagen. 

Nota: No seleccione la imagen haciendo clic en ella. De lo contrario no podrá reproducir 
los pasos. 

7 Seleccione en la paleta de marcador los pasos correspondientes al cambio de 
espaciado de la imagen y la selección de la imagen siguiente. Haga clic en el 
botón Reproducir para ejecutar esos pasos. 

El espaciado de la imagen actual cambiará y se seleccionará la imagen siguiente. 

8 Siga haciendo clic en Reproducir hasta que haya establecido correctamente el 
espaciado de todas las imágenes. 

Para aplicar pasos a un objeto de otro documento, utilice Copiar pasos. Consulte 
“Copiar y pegar pasos entre documentos”, en la página 101. 


Copiar y pegar pasos entre documentos 

Todos los documentos abiertos tienen su propio historial de pasos. Puede copiar 
los pasos de un documento y pegarlos en otro. 

Para reutilizar los pasos de un documento en otro: 

1 Comience desde el documento que contiene los pasos que desea reutilizar. 

2 Seleccione los pasos en la paleta de marcador. 

ifr 3 Haga clic en el botón Copiar pasos de la paleta de marcador para copiar esos pasos. 

4 Abra el otro documento. 

5 Coloque el punto de inserción donde desee o seleccione un objeto para 
aplicarle los pasos. 

6 Elija Edición > Pegar para pegar los pasos. 

Los pasos se reproducirán a medida que se peguen en la paleta de marcador del 
documento. La paleta de marcador los muestra como un solo paso, 
denominado Pegar pasos. 

Nota: El comando Copiar pasos es distinto que el comando Copiar. No se puede utilizar el 
comando Copiar del menú Edición para copiar pasos, aunque sí se utiliza Edición > Pegar 
para pegarlos. 
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Al cerrar un documento se borra su historial. Si desea utilizar los pasos de un 
documento después de cerrarlo, copíelos con Copiar pasos (o guárdelos como un 
comando; consulte “Crear comandos a partir de los pasos de marcador”, en la 
página 102) antes de cerrar el documento. 

Hay que tener cuidado al copiar pasos que incluyan los comandos Copiar o Pegar. 

• No utilice Copiar pasos si uno de los pasos es un comando Copiar, pues al 
intentar pegar esos pasos obtendría resultados imprevistos. 

• No puede pegar pasos que incluyan el comando Pegar sin el comando Copiar 
delante. 

Si pega pasos en un editor de texto o en el inspector de código fuente HTML, 
aparecerán como código JavaScript. Esta opción puede resultar útil para aprender 
a escribir secuencias de comandos. Para obtener más información sobre el uso de 
JavaScript en Dreamweaver, consulte “Ampliar Dreamweaver: principios básicos”, 
en la página 403. 


Crear comandos a partir de los pasos de marcador 

Puede guardar un conjunto de pasos de marcador como un comando con nombre 
y acceder a él desde el menú Comandos. 

Cree y guarde un comando si piensa que va a utilizar un conjunto determinado de 
pasos en el futuro, especialmente si desea usar esos pasos la próxima vez que inicie 
Dreamweaver. Los comandos guardados se conservan de manera permanente (a 
menos que los borre), a diferencia de los comandos grabados y las secuencias de 
pasos copiadas. 

Puede utilizar Editar lista de comandos para editar o borrar los nombres de los 
comandos que haya situado en el menú Comandos. Observe que es más 
complicado editar y borrar comandos incorporados en el menú Comandos (es 
decir, que usted no ha agregado explícitamente). Consulte “Personalizar menús de 
Dreamweaver”, en la página 391. 


Para crear un comando: 

1 Seleccione un paso o una serie de pasos en la paleta de marcador. 

2 Haga clic en el botón Guardar como comando o elija Guardar como comando 
en el menú contextual de la paleta de marcador. 

3 Introduzca un nombre para el comando y haga clic en Aceptar. 

El comando aparecerá en el menú Comandos. 

Nota El comando se guardará como archivo JavaScript en la carpeta Dreamweaver/ 
Configuration/Commands. 
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Para utilizar un comando guardado: 

1 Seleccione un objeto al que aplicar el comando o coloque el punto de inserción 
donde desee. 

2 Elija el comando en el menú Comandos. 

Para editar los nombres de comandos del menú Comandos. 

1 Elija Comandos > Editar lista de comandos. 

2 Seleccione un comando para cambiar su nombre e introduzca un nombre 
nuevo. 

3 Haga clic en Cerrar. 

Para borrar un nombre del menú Comandos: 

1 Elija Comandos > Editar lista de comandos. 

2 Seleccione un comando. 

3 Haga clic en Borrar y, seguidamente, en Cerrar. 

Grabar comandos 

Dreamweaver permite grabar un comando temporal para usarlo a corto plazo. La 
diferencia principal entre este sistema y la reproducción de pasos desde la paleta de 
marcador (consulte “Repetir pasos”, en la página 99) consiste en lo siguiente: 

• Los pasos se graban a medida que los ejecuta, por lo que no tiene que 
seleccionarlos en la paleta de marcador. 

• Durante la grabación, Dreamweaver le impide realizar movimientos del ratón 
que no se pueden grabar (como hacer clic para seleccionar algo en una ventana 
o arrastrar un elemento de página a otra ubicación). 

• Si cambia a otro documento mientras está grabando, Dreamweaver no grabará 
los cambios realizados en el otro documento. Mire el cursor para determinar si 
en un determinado momento está grabando o no. 

Dreamweaver sólo conserva un comando grabado simultáneamente. En cuanto 
comience a grabar otro, se perderá el antiguo. Para guardar un comando sin perder 
otro grabado, guárdelo desde la paleta de marcador. Consulte “Crear comandos a 
partir de los pasos de marcador”, en la página 102. 

Una vez grabado un comando, puede guardarlo si lo desea utilizando la paleta de 
marcador. 
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Para grabar temporalmente una serie de pasos usados con frecuencia: 

1 Elija Comandos > Iniciar grabación o pulse Control+Mayús+X (Windows) o 
Comando+Mayús+X (Macintosh). 

El cursor cambiará para indicar que se está grabando un comando. 

2 Cuando termine de grabar, elija Comandos > Detener grabación o pulse 
Control+Mayús+X (Windows) o Comando+Mayús+X (Macintosh). El cursor 
volverá a cambiar. 

Para reproducir un comando grabado: 

Elija Comandos > Reproducir comando grabado o pulse Control+P (Windows) o 
Comando+P (Macintosh). 

Para guardar un comando grabado: 

1 Elija Comandos > Reproducir comando grabado para volver a ejecutar el comando. 

En la lista de pasos de la paleta de marcador aparecerá un paso llamado Ejecutar 
comando. 

2 Seleccione el paso Ejecutar comando y haga clic en el botón Guardar como 
comando. 

3 Introduzca un nombre para el comando y haga clic en Aceptar. 

El comando aparecerá en el menú Comandos. 


Usar guías visuales en el proceso de diseño 

Dreamweaver cuenta con numerosas funciones para ayudarle a diseñar 
documentos y predecir la apariencia final que tendrán en los exploradores. Puede 
llevar a cabo lo siguiente: 

• Ajustar instantáneamente el tamaño deseado para la ventana de documento y 
comprobar si caben los elementos en la página. Consulte “Cambiar el tamaño 
de la ventana de documento”, en la página 67. 

• Usar reglas que sirvan de pista visual para colocar y cambiar el tamaño de las 
capas o las tablas. 

• Usar una imagen de rastreo como fondo de la página para ayudarle a imitar un 
diseño creado en una aplicación de edición de ilustraciones o imágenes. 



• Usar la cuadrícula para lograr una mayor precisión al colocar y ajustar el tamaño 
de las capas. Las marcas de cuadrícula de la página le ayudan a alinear las capas y, 
cuando está activada la función de ajuste, permiten ajustar automáticamente las 
capas con el punto más próximo de la cuadrícula al moverlas o ajustar su tamaño. 
(Los demás objetos, como las imágenes y los párrafos, no se ajustan a la 
cuadrícula.) El ajuste funciona independientemente de la visibilidad de la 
cuadrícula. Consulte “Ajustar capas a la cuadrícula”, en la página 246. 


Mostrar reglas 

Las reglas pueden mostrarse en los bordes izquierdo y superior de la página en 
píxeles, pulgadas o centímetros. 

Para cambiar la configuración de la regla, elija una de las siguientes opciones: 

• Para activar y desactivar las reglas, elija Ver > Reglas > Mostrar. 

• Para cambiar el origen, arrastre el punto cero hasta la página. Para restaurar el 
origen a su posición predeterminada, elija Ver > Reglas > Restablecer origen. 

• Para cambiar la unidad de medida, elija Píxeles, Pulgadas o Centímetros en el 
submenú Ver > Reglas. 


Usar una imagen de rastreo 

Use una imagen de rastreo como guía para la recreación del diseño de una página 
diseñada en una aplicación gráfica. Una imagen de rastreo es una imagen JPEG, 
GIF o PNG que se sitúa en el fondo de la ventana de documento. Puede ocultar la 
imagen, configurar su opacidad y cambiar su posición. 

La imagen de rastreo sólo se encuentra visible en Dreamweaver. Ésta nunca puede 
verse en la página desde un explorador. Cuando está visible la imagen de rastreo, la 
imagen y el color de fondo no están visibles en la ventana de documento; no 
obstante, se encontrarán visibles cuando la página se muestre en un explorador. 


Para colocar una imagen de rastreo en la ventana de documento: 

1 Seleccione Ver > Imagen de rastreo > Cargar. 

2 En el cuadro de diálogo que aparece, seleccione un archivo de imagen y haga 
clic en Seleccionar (Windows) o Elegir (Macintosh). 

3 Aparecerá el cuadro de diálogo Propiedades de la página. Especifique la 
transparencia para la imagen arrastrando el control deslizante Transparencia 
imagen y, a continuación, haga clic en Aceptar. 

También puede elegir una imagen de rastreo o cambiar la transparencia de la 
imagen de rastreo actual en cualquier momento desde el cuadro de diálogo 
Propiedades de la página seleccionando Modificar > Propiedades de la página. 
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Para mostrar u ocultar la imagen de rastreo: 

Seleccione Ver > Imagen de rastreo > Mostrar. 

Para cambiar la posición de una imagen de rastreo, lleve a cabo una de estas 
operaciones: 

• Para especificar la posición de la imagen de rastreo, elija Ver > Imagen de rastreo 
> Ajustar posición y después introduzca los valores de las coordenadas X e Y. 

• Para mover la imagen de píxel en píxel, utilice las teclas de flecha. 

• Para mover la imagen de cinco en cinco píxeles, pulse Mayús y las teclas de flecha. 

• Para mover de nuevo la imagen de rastreo hasta la esquina superior izquierda de 
la ventana de documento (0,0), elija Ver > Imagen de rastreo > Restablecer 
posición. 

Para alinear la imagen de rastreo con un objeto seleccionado: 

1 Seleccione un objeto de la ventana de documento. 

2 Elija Ver > Imagen de rastreo > Alinear con selección. 

La esquina superior izquierda de la imagen de rastreo se alineará con la esquina 
superior izquierda del objeto seleccionado. 


Interactividad y animación 

Muchas páginas Web son estáticas, pues sólo contienen texto e imágenes. 
Dreamweaver permite ir más allá de las páginas estáticas, utilizando interactividad 
y animación para captar el interés de los visitantes. Estas capacidades ofrecen la 
posibilidad de interactuar con los visitantes según se desplazan y hacen clic y 
permiten demostrar conceptos y validar datos de formularios sin establecer 
contacto con el servidor. En otras palabras, ofrecen nuevas opciones sin necesidad 
de salir de la página. 
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Dreamweaver dispone de varias maneras de agregar interactividad y animación a 

las páginas: 

• Use los comportamientos para realizar tareas de respuesta a eventos específicos, 
como por ejemplo, resaltar un botón cuando el cursor pasa por encima de él, 
validar un formulario cuando el usuario hace clic en el botón Enviar o abrir una 
segunda ventana del explorador cuando la página principal ha terminado de 
cargarse. Consulte “Usar comportamientos”, en la página 297. 

• Use líneas de tiempo para crear animaciones que no necesitan plug-ins, 
controles de ActiveX o Java. Las líneas de tiempo usan HTML dinámico para 
cambiar la posición de una capa o el origen de una imagen con el paso del 
tiempo, o para activar automáticamente acciones de comportamiento cuando la 
página ha terminado de cargarse. Consulte “Líneas de tiempo”, en la 

página 253. 

• Use películas Shockwave y Flash, applets de Java o cualquier otro control 
ActiveX o plug-in de Netscape en una página para agregar películas autónomas, 
esquemas de exploración interactivos y otros elementos multimedia a su página. 
Consulte “Insertar medios”, en la página 281. 


Ver y editar el contenido de HEAD 

Los archivos HTML constan de dos secciones principales: la sección HEAD y la 
sección BODY. La sección BODY es la parte del documento que se encuentra visible 
para los visitantes en una ventana del explorador (y en la ventana de documento 
de Dreamweaver). La sección HEAD no suele estar visible para los visitantes (ni en 
Dreamweaver), a excepción del texto con la etiqueta TULE, que aparece en la barra 
de título del explorador y de la ventana de documento y que se utiliza como 
etiqueta para los marcadores del documento. Asigne un título a todas las páginas 
que cree. 

La sección HEAD contiene información importante además del título del 
documento, incluido el tipo de documento, la codificación de idioma, las 
funciones y variables JavaScript y VBScript y las palabras clave y los indicadores de 
contenido para motores de búsqueda. No es necesario suministrar todos estos 
elementos para cada página. Por ejemplo, puede definir palabras clave e 
indicadores de contenido para la página principal únicamente. Puede ver los 
elementos en la sección HEAD utilizando el menú Ver o el inspector de código 
fuente HTML. 
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Para ver los elementos de la sección HEAD de un documento: 

Elija Ver > Contenido de Head. Por cada elemento de la sección HEAD aparece un 
icono en la parte superior de la ventana de documento. 

Para insertar elementos en la sección HEAD de un documento: 

1 Lleve a cabo una de estas operaciones: 

• Elija Head en el menú emergente situado en la parte superior de la paleta de 
objetos y haga clic en uno de los botones de dicha paleta. 

• Elija un elemento en el submenú Insertar > Head. 

2 Introduzca opciones para el elemento en el cuadro de diálogo que aparece a 
continuación o en el inspector de propiedades. 

Para editar los elementos de la sección HEAD de un documento: 

1 Haga clic en uno de los iconos de la sección HEAD para seleccionarlo. 

2 Defina o modifique las propiedades del elemento en el inspector de 
propiedades. 

Para obtener información acerca de las propiedades de elementos concretos de la 
sección HEAD, consulte los temas siguientes en la Ayuda de Dreamweaver: 

• Propiedades de META 

• Propiedades de título 

• Propiedades de palabras clave 

• Propiedades de descripción 

• Propiedades de actualización 

• Propiedades de secuencia de comandos 

• Propiedades de base 

• Propiedades de vínculo 
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CAPÍTULO 4 

Crear vínculos y explorar 


Después de establecer un sitio local donde almacenar los documentos del sitio 
Web y de crear páginas HTML, puede establecer conexiones desde sus 
documentos hasta otros documentos o tipos de archivo. Para obtener información 
sobre cómo se configura un sitio local, consulte “Crear un sitio local”, en la 
página 78. 

Dreamweaver ofrece varios métodos para establecer vínculos de hipertexto con 
documentos, imágenes, archivos multimedia o programas transferibles. Puede 
establecer vínculos con cualquier texto o imagen de cualquier lugar del 
documento, incluidos el texto y las imágenes situados en un encabezado, lista, 
tabla, capa o marco. 

Con Dreamweaver puede crear fácilmente los siguientes tipos de archivos de texto 
e imágenes gráficas: 

• Vínculos internos entre documentos del mismo sitio Web. 

• Vínculos externos con documentos fuera del sitio Web local. 

• Vínculos de correo electrónico que abran un formulario de correo. 

• Vínculos con puntos de fijación con nombre que permiten que el visitante pase 
a una determinada área de la misma página Web o a otra página distinta. 

Para obtener una representación visual de la estructura del sitio, utilice la función 
Mapa del sitio. En el mapa del sitio puede agregar nuevos documentos al sitio, 
crear vínculos con documentos, quitar documentos y comprobar los vínculos con 
archivos dependientes. Consulte “Ver la estructura del sitio”, en la página 127. 
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Ubicación y rutas de documentos 

A la hora de crear vínculos resulta fundamental conocer la ruta de archivo entre el 
documento desde el que establece el vínculo y el documento con el que lo 
establece. 

Cada página Web tiene una dirección exclusiva, denominada URL (Localizador 
Uniforme de Recursos). Para obtener información detallada acerca de los URL, 
consulte la página del World Wide Web Consortium sobre asignación de nombres 
y direcciones. Sin embargo, cuando se crea un vínculo local (un vínculo de un 
documento con otro documento del mismo sitio), no suele ser necesario 
especificar el URL completo del documento de destino. En este caso se especifica 
una ruta relativa desde el documento actual o desde la carpeta raíz del sitio. Hay 
tres tipos de rutas de documento: 

• Rutas absolutas (como http://www.macromedia.com/support/dreamweaver/ 
contents.html). 

• Rutas relativas al documento (como dreamweaver/contents.html). 

• Rutas relativas a la raíz (como /support/dreamweaver/contents.html). 

Con Dreamweaver puede seleccionar fácilmente el tipo de ruta de documento 
para crear los vínculos: Consulte “Establecer un vínculo con un documento”, en la 
página 115. 


Rutas absolutas 

Rutas absolutas Proporcionan el URL completo del documento vinculado, 
incluido el protocolo que se debe usar (generalmente, http:// para páginas Web). 
Por ejemplo, http://www.macromedia.com/ support/dreamweaver/contents.html 
es una ruta absoluta. Para vincular un documento situado en otro servidor es 
preciso emplear una ruta absoluta. También puede utilizar vínculos de ruta 
absoluta para vincular las páginas de un sitio situado en su ordenador local (por 
ejemplo, una presentación Web). Sin embargo, este método es desalentador, pues 
si transfiere los archivos a otra ubicación o cambia la estructura de archivos del 
sitio, los vínculos se romperán y, por tanto, los archivos dejarán de abrirse. 
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Rutas relativas al documento 


Rutas relativas al documento Son las más adecuadas para utilizar con vínculos locales 
en la mayoría de los sitios Web. Resultan particularmente útiles cuando el documento 
actual y el documento con el que se establece el vínculo se encuentran en la misma 
carpeta y es probable que vayan a permanecer juntos. También puede utilizar una ruta 
relativa al documento para establecer un vínculo con un documento de otra carpeta, 
pero especificando la ruta a través de la jerarquía de carpetas desde el documento actual 
hasta el vinculado. Al especificar una ruta relativa al documento, omita la parte del 
URL absoluto que coincida en los documentos actual y vinculado, indicando 
únicamente la parte de la ruta que difiera. 

Para establecer un vínculo desde un archivo hasta otro de la misma carpeta, indique 
simplemente el nombre del archivo de destino. Para establecer un vínculo con un 
archivo situado en una subcarpeta de la carpeta del documento actual, indique el 
nombre de dicha subcarpeta, seguido de una barra diagonal y del nombre del archivo 
de destino. Para establecer un vínculo con un archivo situado en la carpeta padre de la 
carpeta del documento actual, introduzca ../ delante del nombre del archivo (donde .. 
significa “un nivel por encima en la jerarquía de carpetas”). 

Por ejemplo, supongamos que tiene un sitio con esta estructura: 
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Para establecer un vínculo desde contents.html hasta otros archivos: 

• Para establecer un vínculo desde contents.html hasta horas.html (ambos 
archivos se encuentran en la misma carpeta), el nombre de archivo será la ruta 
relativa: horas.html. 

• Para establecer un vínculo con tips.html (en la subcarpeta llamada recursos), 
utilice la ruta relativa recursos/tips.html. 

Cada barra diagonal (/) representa un nivel por debajo en la jerarquía de 
carpetas. 

• Para establecer un vínculo con index.html (en la carpeta padre, un nivel por 
encima de contents.html), utilice la ruta relativa ../index.html. 

Cada ../ representa un nivel por encima en la jerarquía de carpetas. 

• Para establecer un vínculo con catalog.html (en una subcarpeta distinta de la 
carpeta padre), utilice la ruta relativa ../products/catalog.html. 

../ sube a la carpeta padre; products/ baja a la subcarpeta de productos. 

Nota: Guarde siempre un archivo nuevo antes de crear una ruta relativa al documento, pues 
ésta no es válida sin un punto de partida preciso. Si crea una ruta relativa al documento antes 
de guardar el archivo, Dreamweaver utilizará temporalmente una ruta absoluta que 
comenzará por archivo:// hasta que guarde el archivo. Cuando guarde el archivo, 
Dreamweaver convertirá la ruta archivo:// en una ruta relativa. 

No es necesario actualizar las rutas relativas al documento entre archivos que se 
mueven como un grupo para mantener las mismas rutas relativas entre ellos (por 
ejemplo, al mover una carpeta completa, de forma que todos los archivos de esa 
carpeta conserven las mismas rutas relativas entre sí). Sin embargo, cuando se 
mueve un archivo individual que contiene vínculos relativos al documento o un 
archivo individual que está vinculado en relación con el documento, no necesitará 
actualizar esos vínculos. Si mueve o cambia el nombre de archivos utilizando la 
ventana Sitio, Dreamweaver le ayudará a actualizar todos los vínculos relevantes. 
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Rutas relativas a la raíz 


Rutas relativas a la raíz Indican la ruta desde la carpeta raíz del sitio hasta un 
documento. 

Nota: Si comprende las ventajas y las limitaciones de las rutas relativas a la raíz, pueden 
resultarle útiles. Sin embargo, si no está familiarizado con ellas, es recomendable utilizar 
rutas relativas al documento. 

Una ruta relativa a la raíz comienza por una barra diagonal, que representa la 
carpeta raíz del sitio. Por ejemplo, /support/ tips.html es una ruta relativa a la raíz 
de un archivo (tips.html) situado en la subcarpeta de soporte de la carpeta raíz del 
sitio. 

A menudo, una ruta relativa a la raíz es la mejor forma de especificar vínculos en 
un sitio Web en el que necesita mover con frecuencia archivos HTML de una 
carpeta a otra. Al mover un documento que contiene vínculos relativos a la raíz, 
no es preciso cambiar los vínculos. Por ejemplo, si los archivos HTML utilizan 
vínculos relativos a la raíz para archivos dependientes (como imágenes) y se mueve 
un archivo HTML, sus vínculos de archivos dependientes seguirán siendo válidos. 
Sin embargo, al mover o cambiar el nombre de documentos con vínculos relativos 
a la raíz, deberá actualizar esos vínculos, incluso aunque las rutas de los 
documentos no hayan cambiado en su relación mutua. Por ejemplo, si mueve una 
carpeta, deberá actualizar todos los vínculos relativos a la raíz de los archivos de esa 
carpeta. Si mueve o cambia el nombre de archivos utilizando la ventana Sitio, 
Dreamweaver le ayudará a actualizar todos los vínculos relevantes. 

Defina un sitio local en Dreamweaver eligiendo una carpeta raíz local que servirá 
como el equivalente a la raíz de documento en un servidor. (Consulte “Crear un 
sitio local”, en la página 78.) Dreamweaver utiliza esta carpeta para determinar las 
rutas relativas a la raíz de los archivos. 

Los vínculos relativos a la raíz son interpretados por los servidores, no por los 
exploradores. Por tanto, si abre una página local que utiliza vínculos relativos a la 
raíz en el explorador (sin utilizar Vista previa en el explorador desde 
Dreamweaver), los vínculos no funcionarán. Cuando se utiliza la función Vista 
previa en el explorador para ver un documento que utiliza vínculos relativos a la 
raíz, Dreamweaver los convierte temporalmente (sólo en el archivo que se 
visualiza) para que utilicen rutas absolutas de archivo://. Sin embargo, sólo se 
puede ver simultáneamente una página que utilice vínculos relativos a la raíz. Si 
sigue un vínculo de la página visualizada, los nuevos vínculos relativos a la raíz no 
se convertirán y el explorador no podrá seguirlos. La vista previa de páginas en 
conjuntos de marcos que utilizan vínculos relativos a la raíz ocasiona problemas 
similares. 
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Para obtener una vista previa de un conjunto de páginas que utilizan vínculos 
relativos a la raíz, lleve a cabo una de estas operaciones: 

• Coloque los archivos en un servidor remoto y ábralos en él. 

• (Sólo Windows) Elija Edición > Preferencias y, en las preferencias de vista 
previa en el explorador, seleccione Vista previa usando el servidor local. Para 
utilizar esta opción deberá ejecutar un servidor Web en el ordenador local. 


Crear vínculos 

La etiqueta HTML para crear un vínculo de hipertexto se denomina “anchor”. 
Dreamweaver crea una etiqueta anchor para los objetos, el texto o las imágenes 
desde los que se establecen vínculos. Por ejemplo, si en la ventana de documento 
selecciona el texto Página principal y, a continuación, crea un vínculo con un 
archivo llamado home.htm, el código fuente HTML para el vínculo será el 
siguiente: 

<a href="home.htm">Página principal</a> 

Antes de crear vínculos, deberá saber cómo funcionan las rutas relativas al 
documento, las rutas relativas a la raíz y las rutas absolutas. Consulte “Ubicación y 
rutas de documentos”, en la página 110. 

Puede crear varios tipos de vínculos en un documento: 

• Un vínculo con otro documento o archivo, como un archivo gráfico, de 
película o de sonido. 

• Un vínculo de punto de fijación con nombre, que salta a un emplazamiento 
específico dentro de un documento. 

• Un vínculo de correo electrónico, que abre un formulario de correo electrónico 
con la dirección del destinatario ya cumplimentada. 

• Un vínculo nulo, o un vínculo de secuencia de comandos, que permite adjuntar 
comportamientos a un objeto o crear un vínculo que ejecute código JavaScript. 

Dreamweaver ofrece varias formas de crear fácilmente vínculos entre documentos: 

• Utilice la ventana del mapa del sitio para ver, crear, cambiar o eliminar vínculos. 

• Utilice Modificar > Crear vínculo para seleccionar un archivo con el que desea 
establecer un vínculo. 

• Utilice el inspector de propiedades para establecer un vínculo con un archivo: 
haga clic en el icono de carpeta para localizar y seleccionar un archivo, use el 
icono de señalización para seleccionarlo o escriba su ruta. 

• Use el menú contextual, elija Crear vínculo y, a continuación, seleccione un 
archivo con el que desea establecer un vínculo. 
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Establecer un vínculo con un documento 

Utilice el inspector de propiedades para vincular una imagen, un objeto o texto 
con otro documento o para vincular una determinada sección de un documento. 

En esta sección sólo se ofrece información sobre un método para vincular 
documentos. Para obtener información sobre otras técnicas de creación de 
vínculos, consulte “Establecer vínculos con documentos utilizando el icono de 
señalización de archivo”, en la página 116 y “Crear y modificar vínculos en Ver 
mapa del sitio”, en la página 131. 


Para crear vínculos entre documentos: 

1 Seleccione texto o una imagen en la ventana de documento. 

2 Abra el inspector de propiedades (Ventana > Propiedades) y lleve a cabo una de 
las siguientes operaciones: 
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• Haga clic en el icono de carpeta situado a la derecha del campo Vínculo para 
localizar y seleccionar un archivo. 

La ruta del documento vinculado aparecerá en el campo URL. Utilice el menú 
emergente Relativo a del cuadro de diálogo Seleccionar archivo HTML para 
establecer si la ruta es relativa al documento o a la raíz. A continuación, haga 
clic en Seleccionar. 

Nota: Al cambiar el tipo de ruta en el campo Relativo a, Dreamweaver establece la 
selección como el tipo de ruta predeterminado para futuros vínculos hasta que cambie la 
selección. 

• En el campo Vínculo, introduzca la ruta y el nombre de archivo del 
documento. 

Para establecer un vínculo con un documento del sitio, introduzca una ruta 
relativa al documento o relativa a la raíz. Para establecer un vínculo con un 
documento externo al sitio, introduzca la ruta absoluta que incluya el tipo de 
protocolo (por ejemplo, http://). 

3 Seleccione una ubicación para abrir el documento. 

Para que el documento vinculado aparezca en un lugar distinto de la ventana o 
el marco actual, seleccione una opción en el menú emergente Destino del 
inspector de propiedades: 

Para obtener información sobre el establecimiento de vínculos con documentos 
con marcos, consulte “Controlar el contenido del marco con vínculos”, en la 
página 278. 
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Establecer vínculos con documentos utilizando el icono de 
señalización de archivo 

Utilice el icono de señalización de archivo para crear un vínculo con otro 
documento abierto, con un documento o una imagen de la ventana Sitio o con un 
punto de fijación con nombre. 

Para establecer un vínculo con un documento mediante el icono de señalización 
de archivo en el inspector de propiedades: 

1 Seleccione texto o una imagen en la ventana de documento. 

2 Arrastre el icono de señalización de archivo situado a la derecha del campo 
Vínculo en el inspector de propiedades y señale otro documento abierto, un 
punto de fijación visible en un documento abierto o un documento de la 
ventana Sitio. 

El campo Vínculo se actualizará para mostrar el vínculo. 

3 Suelte el botón del ratón. 
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Cómo arrastrar el icono de señalización de archivo desde el inspector de propiedades 
hasta un archivo de la ventana Sitio. 
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Para crear un vínculo desde una selección en un documento abierto: 

1 Seleccione texto o una imagen en la ventana de documento. 

2 Pulse Mayús y, al mismo tiempo, arrastre la selección. 

Mientras arrastra la selección, aparecerá el icono de señalización de archivo. 

3 Señale otro documento abierto, un punto de fijación visible en un documento 
abierto o un documento de la ventana Sitio. 

4 Suelte el botón del ratón. . 



Cómo arrastrar el icono de señalización de archivo mientras pulsa la tecla Mayús 
desde el texto de la ventana de documento hasta un archivo de la ventana Sitio. 
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Para crear un vínculo desde un archivo del mapa del sitio: 

1 Seleccione un archivo HTML del mapa del sitio. 

Aparecerá el icono de señalización de archivo junto al archivo. 

2 Arrastre el icono de señalización de archivo y señale otro documento abierto, 
un punto de fijación visible en un documento abierto o un documento de la 
ventana Sitio. 

3 Suelte el botón del ratón. 



Cómo arrastrar el icono de señalización de archivo desde un archivo seleccionado en 
Ver mapa del sitio hasta un archivo en Ver archivos del sitio de la ventana Sitio. 


Para obtener información acerca de la visualización de un mapa del sitio, consulte 
“Ver sitios locales”, en la página 81. 
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Establecer un vínculo con un punto de fijación con nombre 

Los puntos de fijación con nombre establecen marcadores de posición en un 
documento. Use puntos de fijación con nombre para establecer un vínculo con 
una determinada área del documento actual o de otro documento. Los puntos de 
fijación con nombre se utilizan a menudo para saltar a un tema específico o la 
parte superior de un documento, lo que permite al visitante llegar rápidamente a 
la posición seleccionada. 

Para crear un vínculo con un punto de fijación con nombre siga este 
procedimiento de dos pasos. En primer lugar, cree un punto de fijación con 
nombre. A continuación, cree un vínculo con dicho punto. 

Nota: Los puntos de fijación con nombre tienen en cuenta el uso de mayúsculas y 
minúsculas. 


Para crear un punto de fijación con nombre: 

1 En la ventana de documento, coloque el punto de inserción en el lugar en el 
que desee insertar el punto de fijación con nombre. 

2 Lleve a cabo una de estas operaciones: 

• Elija Insertar > Punto de fijación con nombre. 

• Pulse Control+Alt+A (Windows) o Comando+Opción+A (Macintosh). 

• En el panel Invisibles de la paleta de objetos, haga clic en el botón Punto de 
fijación. 

3 En el campo Nombre del punto de fijación del cuadro de diálogo Insertar 
punto de fijación con nombre, escriba un nombre. 

Si el marcador del punto de fijación no aparece en la posición del punto de 
inserción, elija Ver > Elementos invisibles. 

Para establecer un vínculo con un punto de fijación con nombre: 

1 En la ventana de documento, seleccione texto o una imagen para crear un 
vínculo a partir de ellos. 

2 En el campo Vínculo del inspector de propiedades, introduzca un signo de 
número (#) y el nombre del punto de fijación. Por ejemplo: 

• Para establecer un vínculo con un punto de fijación denominado “superior” en 
el archivo actual, escriba #superior. 

• Para establecer un vínculo con un punto de fijación denominado “superior” en 
un archivo distinto de la misma carpeta, escriba nombrearchivo.html#superior. 
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Para establecer un vínculo con un punto de fijación con nombre mediante el 
método de señalización de archivo: 


1 Elija Ver > Elementos invisibles para convertir en visible el punto de fijación. 

2 Seleccione texto o una imagen en la ventana de documento. 

3 Lleve a cabo una de estas operaciones: 

• Haga clic en el icono de señalización de archivo situado a la derecha del campo 
Vínculo en el inspector de propiedades y arrástrelo hasta el punto de fijación 
con el que desea establecer el vínculo: un punto de fijación en el mismo 
documento o un punto de fijación en otro documento abierto. 

• Pulse Mayáis y, al mismo tiempo, haga clic en la ventana de documento y 
arrastre hasta el punto de fijación con el que desea establecer el vínculo: un 
punto de fijación en el mismo documento o un punto de fijación en otro 
documento abierto. 

Crear un vínculo de correo electrónico 

Cuando el usuario hace clic en un vínculo de correo electrónico se abre una nueva 
ventana de mensaje (utilizando el programa de correo asociado al explorador del 
usuario). En la ventana de mensaje de correo electrónico, el campo Para se rellena 
automáticamente con la dirección especificada en el vínculo. 

Para crear un vínculo de correo electrónico utilizando el comando Insertar vínculo 
de correo electrónico: 

1 En la ventana de documento, coloque el punto de inserción donde desea que 
aparezca el vínculo de correo electrónico o seleccione el texto que desea que 
aparezca como vínculo de correo electrónico. Luego lleve a cabo una de estas 
operaciones: 

• Elija Insertar > Vínculo de correo electrónico. 

• En el panel Común de la paleta de objetos, seleccione Insertar vínculo de 
correo electrónico. 

2 En el campo Texto del cuadro de diálogo Insertar vínculo de correo electrónico, 
escriba o edite el texto que desea mostrar en el documento como vínculo de 
correo electrónico. 

3 En el campo Correo electrónico, escriba la dirección a la que se deberá enviar el 
correo electrónico. 

4 Pulse la tecla Aceptar. 
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Para crear un vínculo de correo electrónico mediante el inspector de propiedades: 

1 Seleccione texto o una imagen en la ventana de documento. 

2 En el campo Vínculo del inspector de propiedades, escriba mailto: y, a 
continuación, una dirección 

de correo electrónico . 


Crear vínculos de secuencia de comandos y nulos 

Los vínculos más utilizados son los que se establecen con documentos y puntos de 
fijación con nombre (consulte “Establecer un vínculo con un documento”, en la 
página 115 y “Establecer un vínculo con un punto de fijación con nombre”, en la 
página 119, respectivamente), aunque también hay otros tipos. 

Vínculo nulo Es un vínculo no designado. Los vínculos nulos se utilizan para 
activar objetos o texto en una página. Cuando el texto o el objeto está activo, 
puede adjuntarle un comportamiento para cambiar una imagen o para mostrar 
una capa cuando el cursor se desplaza sobre el vínculo. Para obtener más 
información sobre los sitios remotos, consulte “Adjuntar un comportamiento”, en 
la página 302. 

Vínculos de secuencia de comandos Ejecutan código JavaScript o llaman a una 
función JavaScript. Sirven para proporcionar a los usuarios información adicional 
sobre un elemento sin salir de la página actual. Los vínculos de secuencia de 
comandos también pueden emplearse para realizar cálculos, validar formularios y 
otras tareas de procesamiento cuando el usuario hace clic en un elemento 
específico. 

Para crear un vínculo nulo: 

1 Seleccione texto, una imagen o un objeto en la ventana de documento. 

2 En el campo Vínculo del inspector de propiedades escriba el carácter de 
número (#). 

Para crear un vínculo de secuencia de comandos: 

1 Seleccione texto, una imagen o un objeto en la ventana de documento. 

2 En el campo Vínculo del inspector de propiedades, escriba javascript: y, a 
continuación, código JavaScript o una llamada de función. 

Por ejemplo, si introduce javascript:alert(‘Esta función no es válida’) en el 
campo Vínculo, se creará un vínculo que mostrará un cuadro de advertencia 
JavaScript con el mensaje Esta fundón no es válida. 

Nota Dado que el código JavaScript aparece entre comillas dobles (como el valor del 
atributo HREF), deberá utilizar comillas simples en el código de la secuencia de comandos 
o anular su valor situando barras invertidas delante de las comillas dobles (por ejemplo, 
Y'Esta función no es válidaV'). 
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Crear menús de salto 


Un menú de salto es un menú emergente con opciones vinculadas a un 
documento o un archivo. Puede crear vínculos con documentos del sitio Web, con 
documentos de otros sitios, correo electrónico, gráficos o con cualquier tipo de 
archivo se pueda abrir en un explorador. 

Un menú de salto puede tener tres componentes básicos: 

• Un mensaje de selección de menú, como una categoría de descripción para los 
elementos del menú, o instrucciones, como “Elija uno”. 

• Una lista de elementos de menú vinculados: el usuario hace clic en una opción 
y se abre un documento o un archivo vinculado. 

• Un botón Ir. 

Una vez seleccionado un elemento del menú de salto no es posible volver a 
seleccionarlo si vuelve a esa página o si el campo Abrir URL en especifica un 
marco. Hay dos formas de solucionar este problema: 

• Utilice un mensaje de selección de menú, como una categoría, o instrucciones 
para el usuario, como “Elija uno”. Un mensaje de selección de menú vuelve a 
seleccionarse después de cada selección del menú. 

• Utilice un botón Ir, que permite al usuario volver a visitar el vínculo 
seleccionado actualmente. 

Insertar un menú de salto 


Para crear un menú de salto: 

1 Elija Insertar > Objeto de formulario > Menú de salto. 

Aparecerá el cuadro de diálogo Insertar menú de salto. 

2 Si desea crear un mensaje de selección para el usuario, escriba el texto deseado 
en el campo Texto del cuadro de diálogo Insertar menú de salto. En Opciones, 
active la casilla de verificación Seleccionar primer elemento tras el cambio de 
URL. A continuación, haga clic en el botón más (+) para agregar un elemento 
de menú. 

3 En el campo Texto del cuadro de diálogo Insertar menú de salto, escriba el texto 
que desea que aparezca en la lista de menú. 

4 En el campo Al seleccionarse, ir a URL, seleccione el archivo que desea abrir 
realizando uno de estos procedimientos: 

• Haga clic en Examinar y, a continuación, seleccione el archivo que desea abrir. 

• Escriba la ruta del archivo que desea abrir. 
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5 En el menú emergente Abrir URL en, seleccione la ubicación donde desea abrir 
el archivo. Para ello, lleve a cabo uno de estos procedimientos: 

• Seleccione Ventana principal para abrir el archivo en la misma ventana. 

• Seleccione un marco para abrir el archivo. 

Nota: Si el marco deseado no aparece en el menú emergente Destino, salga del cuadro 
de diálogo Insertar menú de salto y asigne un nombre al marco. 

Para obtener información sobre la asignación de nombres a marcos, consulte 
“Configurar propiedades de marco”, en la página 272. 

6 En Opciones, dispone de las opciones siguientes: 

• Para agregar un botón Ir, active la casilla de verificación Insertar botón Ir tras el 
menú. 

• Para configurar un mensaje de selección, active la casilla de verificación 
Seleccionar primer elemento tras el cambio de URL. 

Nota: Seleccione sólo una opción por menú de salto. Estas opciones se aplican a un 
menú de salto completo. 

7 Para agregar elementos de menú adicionales, haga clic en el botón más (+) y 
repita los pasos 2 a 5 de este procedimiento. 

8 Haga clic en Aceptar. 

Editar elementos de menú de salto 

Puede realizar cambios en los elementos de menú de salto en el inspector de 
propiedades o el inspector de comportamientos. Puede cambiar el orden de la lista 
o el archivo con el que se vincula un elemento. También puede agregar, eliminar o 
cambiar el nombre de un elemento. 

Utilice el inspector de comportamientos para cambiar la ubicación en la que se abre un 
archivo vinculado o para agregar o cambiar un mensaje de selección de menú. Para 
obtener información sobre cómo utilizar el inspector de comportamientos para editar 
un menú de salto, consulte “Menú de salto”, en la página 317. 

Para editar un elemento de menú de salto mediante el inspector de propiedades: 

1 En el inspector de propiedades, elija Ventana > Propiedades. 

2 En la ventana de documento, haga clic en el objeto Menú de salto para 
seleccionarlo. 

El icono Lista/menú aparecerá en el inspector de propiedades. 

3 En el inspector de propiedades, haga clic en el botón Valores de lista. 

4 Realice cambios en los elementos de menú y, a continuación, haga clic en Aceptar. 
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Crear barras de exploración 

Una barra de exploración se compone de una imagen o un conjunto de imágenes 
cuya visualización cambia según las acciones que realice el usuario. 

Antes de usar el comando Insertar barra de exploración, cree un conjunto de 
imágenes de barra de exploración para los estados de la imagen que desea mostrar. 

Una imagen puede tener cuatro estados: 

• Arriba: la imagen que aparece cuando la página se carga inicialmente. 

• Sobre: la imagen que aparece cuando el cursor pasa sobre una imagen. 

• Abajo: la imagen que aparece cuando se hace clic en una imagen. 

• Abajo y Sobre: la imagen que aparece cuando el cursor pasa sobre una imagen 
después de haber hecho clic en ella. 

El ejemplo siguiente demuestra cómo se pueden visualizar los distintos estados de 
la imagen de un botón: cuando un usuario ve la página principal, el botón de 
imagen de dicha página se oscurece y los otros botones de la barra de exploración 
se encuentran en su estado normal o arriba. En la página principal, el usuario 
mueve el cursor sobre el botón Our Story. Se muestra una imagen con un tono 
más claro del mismo color (es decir, el botón se resalta) y el usuario hace clic en el 
botón Our Story. En la página Our Story, el botón Our Story se oscurece y el 
botón de imagen de la página principal se encuentra en su estado normal. 

Puede crear una barra de exploración, copiarla en otras páginas del sitio y editar 
los comportamientos de la página para mostrar distintos estados a medida que se 
accede a las páginas. 
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Insertar una barra de exploración 


Para crear una barra de exploración: 

1 Lleve a cabo una de estas operaciones: 

• Elija Insertar > Barra de exploración. 

• En el panel Común de la paleta de objetos, seleccione Insertar barra de 
exploración. 

Aparecerá el cuadro de diálogo Insertar barra de exploración. 



2 En el campo Nombre de elemento, introduzca un nombre para el elemento de 
la barra de exploración. 

Los nombres de elemento aparecen en la lista Elementos de barra de 
exploración. Puede utilizar el botón de flecha arriba o abajo para disponer los 
elementos en la barra de exploración. 

3 Seleccione las opciones de estado de la imagen (deberá seleccionar una Imagen 
arriba; otros estados de imagen son opcionales): 

• En el campo Imagen arriba, haga clic en Examinar para seleccionar la imagen 
que desea mostrar inicialmente. 

• En el campo Sobre imagen, haga clic en Examinar para seleccionar la imagen 
que desea mostrar cuando el usuario mueva el cursor sobre la imagen. 

• En el campo Imagen abajo, haga clic en Examinar para seleccionar la imagen 
que desea mostrar cuando el usuario haga clic en la imagen. 

• En el campo Sobre imagen mientras imagen abajo, haga clic en Examinar para 
seleccionar la imagen que desea mostrar cuando el usuario haga clic en la 
imagen y, a continuación, mueva el cursor sobre ella. 
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4 En el campo Al hacerse clic, ir a URL, seleccione una ubicación en la que se 
abrirá el archivo. Para ello, lleve a cabo uno de estos procedimientos: 

• Seleccione Ventana principal para abrir el archivo en la misma ventana: 

• Seleccione un marco en el que se abrirá el archivo. 

Nota: Si el marco deseado no aparece en el menú emergente Destino, salga del cuadro 
de diálogo Insertar barra de exploración y asigne un nombre al marco. 

Para obtener información sobre la asignación de nombres a marcos, consulte 
“Configurar propiedades de marco”, en la página 272. 

5 Seleccione las opciones para cargar la imagen: 

• La opción Carga previa de imágenes transfiere las imágenes cuando se carga la 
página. Si esta opción no está seleccionada, es posible que se produzca una 
demora cuando el usuario mueva el cursor sobre la imagen de sustitución. 

• Seleccione Mostrar “Imagen abajo” inicialmente para mostrar el elemento 
seleccionado en su estado abajo cuando se muestra la página. Por ejemplo, 
cuando se carga la página principal, el botón de dicha página deberá 
encontrarse en su estado abajo. 

Cuando esta opción está seleccionada, aparece un asterisco después del 
elemento en la lista Elementos de barra de exploración. 

6 La sección Insertar ofrece las opciones siguientes: 

• Para insertar los elementos de barra de exploración vertical u horizontalmente 
en el documento, utilice el menú emergente Insertar. 

• Para insertar los elementos de barra de exploración en una tabla, active la casilla 
de verificación Usar tablas. 

7 Haga clic en el botón más (+) para agregar otro elemento a la barra de 
exploración y, a continuación, siga los pasos 2 a 6 para establecer el estado del 
elemento. 

8 Haga clic en Aceptar. 

Modificar una barra de exploración 

Una vez creada una barra de exploración para un documento, puede agregar o 
quitar imágenes de la barra utilizando el comando Modificar barra de exploración. 
Puede emplear este comando para cambiar una imagen o un conjunto de 
imágenes, para determinar qué archivo se abre cuando se hace clic en un botón, 
para seleccionar otra ventana para abrir un archivo o para reordenar la posición de 
las imágenes. 
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Para modificar una barra de exploración: 

1 Elija Modificar > Barra de exploración. 

2 En la lista Elementos de barra de exploración, seleccione el elemento que desea 
editar. 

3 Realice las modificaciones que desee y haga clic en Aceptar. 

Ver la estructura del sitio 

Use el mapa del sitio para ver un sitio local en forma de mapa visual de iconos 
vinculados, para agregar nuevos archivos a un sitio o para agregar, modificar o 
quitar vínculos. La ventana Ver mapa del sitio es ideal para componer o diseñar la 
estructura de un sitio. Puede configurar rápidamente la estructura completa del 
sitio y, seguidamente, obtener una imagen impresa del mapa. 

Nota: La ventana Ver mapa del sitio sólo es aplicable a los sitios locales. Si desea crear un 
mapa de un sitio remoto, copie todo su contenido en el disco local. 

Para ver el mapa de un sitio, lleve a cabo una de estas operaciones: 

• Elija Ventana > Mapa del sitio para abrir la ventana Sitio. 

• En la ventana Sitio, haga clic en el botón Mapa del sitio. 

La página principal del sitio es el punto de partida del mapa. Si Dreamweaver no 
logra determinar qué página del sitio actual es la página principal, se abrirá el 
cuadro de diálogo Definición de sitio para el panel Diseño de mapa del sitio, en el 
que se le solicitará que seleccione la página correcta. 

El mapa del sitio muestra los archivos HTML y el resto del contenido de la página 
como iconos. Los vínculos se muestran en el mismo orden en el que se encuentran 
en el código fuente HTML. 

í • El texto que se muestra en rojo indica que se trata de un vínculo roto. 

© • El texto en azul y marcado con un icono de globo terráqueo indica que se trata 
de un archivo de otro sitio o un vínculo especial (como un vínculo de correo 
electrónico o de secuencia de comandos). 

J • Una marca de verificación verde indica que se trata de un archivo protegido por 
usted. 

V • Una marca de verificación roja indica que se trata de un archivo protegido por 
otro usuario. 

a • Un icono de candado indica que se trata de un archivo de sólo lectura 
(Windows) o bloqueado (Macintosh). 


Crear vínculos y explorar 127 



De forma predeterminada, el mapa del sitio muestra dos niveles de la estructura 
del sitio comenzando por la página principal actual. Haga clic en los signos más 
(+) y menos (-) (Windows) o la flecha de ampliación (Macintosh) situados junto a 
una página para mostrar u ocultar las páginas vinculadas por debajo del segundo 
nivel. 
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home.html 
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product_search.html 

ourstorg.html gifts.html 

thisweek.html 

► {7-| product_blends.... 
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► ^ product_blends.... 


► [7-j producl_tools.hl... 

i * product_foods.h... 


► producl_wear.htm 

► gsj product_tools.hL. 


► ^ product_results.... 

► ^ product_wear.htm 



De forma predeterminada, los archivos ocultos y los archivos dependientes no se 
muestran en el mapa del sitio. Los archivos ocultos son archivos HTML marcados 
como ocultos. Los archivos dependientes son contenido de página ajeno al código 
HTML, como imágenes, plantillas y archivos Shockwave y Flash. Consulte 
“Modificar el diseño del mapa del sitio”, en la página 128 y “Mostrar y ocultar 
archivos de mapa de un sitio”, en la página 132. 


Modificar el diseño del mapa del sitio 

Use las opciones de Diseño de mapa del sitio para personalizar la apariencia del 
mapa del sitio. Puede especificar la página principal, el número de columnas que 
deben mostrarse y si deben mostrarse u ocultarse los archivos ocultos o 
dependientes. 

Para modificar el diseño del mapa del sitio: 

1 Abra el cuadro de diálogo Definición de sitio mediante uno de estos métodos: 

• Elija Sitio > Definir sitios y haga clic en Editar. Seleccione Diseño de mapa del 
sitio en la lista Categoría situada a la izquierda. 

• Elija Ver > Diseño (Windows) o Sitio > Ver mapa del sitio > Diseño 
(Macintosh). 

2 Haga clic en el icono de carpeta para seleccionar una página principal para el 
sitio o escriba una ruta de archivo en el campo Página principal. 

Si no especifica ninguna página principal y Dreamweaver no logra localizar 
ningún archivo denominado index.html o index.htm en la raíz, le pedirá que 
seleccione una página principal al abrir el mapa del sitio. 
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3 Elija opciones en Columna: 

• En el campo Número de columnas, escriba el número de páginas que deben 
mostrarse por cada fila en la ventana del mapa. 

• En el campo Ancho columna, escriba un número para especificar la anchura en 
píxeles de las columnas del mapa del sitio. 

4 En la sección Etiquetas de icono, seleccione si el nombre que se muestra bajo 
los iconos de documento en el mapa del sitio se representarán como nombres 
de archivo o como títulos de página. 

5 En la sección Opciones, seleccione qué archivos desea mostrar en el mapa del 
sitio: 

• Elija Mostrar archivos marcados como ocultos para mostrar los archivos 
HTML marcados como ocultos en el mapa del sitio. Si hay una página oculta, 
su nombre y los vínculos que contenga se mostrarán en cursiva. Para obtener 
información sobre cómo ocultar archivos, consulte “Mostrar y ocultar archivos 
de mapa de un sitio”, en la página 132. 

• Elija Mostrar archivos dependientes para mostrar todos los archivos 
dependientes en la jerarquía del sitio. Un archivo dependiente es una imagen u 
otro contenido ajeno al código HTML que carga el explorador al cargar la 
página principal. 


Trabajar con páginas en el mapa del sitio 

Al trabajar en el mapa del sitio, podrá seleccionar páginas, abrir una página para 
editarla, agregar nuevas páginas al sitio, crear vínculos entre archivos y cambiar el 
título de una página. 

Para seleccionar múltiples páginas en el mapa del sitio, lleve a cabo una de estas 
operaciones: 

• Haga clic mientras pulsa la tecla Mayús para seleccionar múltiples páginas. 

• Comenzando desde un lugar vacío de la vista, arrastre el cursor alrededor de un 
grupo de archivos para seleccionarlos. 

• Haga clic mientras pulsa la tecla Control (Windows) o Comando (Macintosh) 
para seleccionar páginas que no son contiguas. 

Para abrir una página que desea editar, lleve a cabo una de estas operaciones: 

• Haga doble clic en el archivo. 

• Seleccione el archivo y elija Archivo > Abrir selección (Windows) o Sitio > 
Abrir (Macintosh). 
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Para agregar un archivo existente al sitio, lleve a cabo una de estas operaciones: 

• Arrastre un archivo desde el Explorador de Windows o el Finder de Macintosh 
y colóquelo sobre un archivo del mapa del sitio. La página se agregará al sitio y 
se creará un vínculo entre ella y el archivo sobre el que la ha colocado. 

• Seleccione Sitio > Vincular a archivo existente (Windows) o Sitio > Ver mapa 
del sitio > Vincular a archivo existente (Macintosh). 

Para crear un archivo y agregar un vínculo: 

1 Seleccione un archivo HTML en el mapa del sitio y lleve a cabo una de estas 
operaciones: 

• Elija Sitio > Vincular a nuevo archivo (Windows) o Sitio > Ver mapa del sitio > 
Vincular a nuevo archivo (Macintosh). 

• Elija Vincular a nuevo archivo en el menú contextual. 

2 En el campo Archivo del cuadro de diálogo Vincular a nuevo archivo, escriba 
un nombre de archivo. 

3 En el campo Título, escriba un título de página para el archivo. 

4 En el campo Texto vínculo, escriba el texto del vínculo que conecta el archivo 
seleccionado con el nuevo archivo. El vínculo aparecerá en el archivo 
seleccionado. 

5 Haga clic en Aceptar. 

El archivo se guardará en la misma carpeta que el archivo seleccionado. Si se 
agrega un archivo a una rama oculta, el nuevo archivo también se encontrará 
oculto. Consulte “Mostrar y ocultar archivos de mapa de un sitio”, en la 
página 132. 

Para cambiar el título de una página: 

1 Asegúrese de que está activada la opción Mostrar títulos de páginas. 

Elija Ver > Mostrar títulos de páginas (Windows) o Sitio > Ver mapa del sitio > 
Mostrar títulos de páginas (Macintosh). 

2 Lleve a cabo una de estas operaciones: 

• Seleccione una página y haga clic en su título. Cuando el título se convierta en 
un campo editable, escriba el nuevo título del documento. 

• Seleccione una página y elija Archivo > Cambiar nombre (Windows) o Sitio > 
Cambiar nombre (Macintosh). 
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Para cambiar la página principal, lleve a cabo una de estas operaciones: 

• En el panel Carpeta local de la ventana Sitio, haga clic en el archivo que desea 
convertir en la página principal y elija Establecer como página principal en el 
menú contextual. 

• Elija Sitio > Nueva página principal (Windows) o Sitio > Ver mapa del sitio > 
Nueva página principal (Macintosh) para crear una nueva página principal. 

• Elija Sitio > Establecer como página principal (Windows) o Sitio > Ver mapa 
del sitio > Establecer como página principal (Macintosh) para convertir una 
página existente en la página principal. 

Para actualizar la vlsuallzación del mapa del sitio después de realizar cambios: 

• Haga clic en cualquier lugar de la ventana Mapa del sitio para cancelar la 
selección de archivos. A continuación, elija Ver > Actualizar local (Windows) o 
Sitio > Ver archivos del sitio > Actualizar local (Macintosh). 


Crear y modificar vínculos en Ver mapa del sitio 

Puede modificar la estructura del sitio en el mapa del sitio agregando, cambiando 

o eliminando vínculos. El mapa del sitio se actualizará automáticamente para 

mostrar los cambios realizados en el sitio. 

Para agregar un vínculo, lleve a cabo una de estas operaciones: 

• Arrastre una página desde el Explorador de Windows o el Finder de Macintosh 
y colóquela sobre una página del mapa del sitio. 

• Seleccione una página HTML y elija Sitio > Vincular a archivo existente 
(Windows) o Sitio > Ver mapa del sitio > Vincular a archivo existente 
(Macintosh), o bien seleccione Vincular a archivo existente en el menú 
contextual. 

• Seleccione una página HTML del mapa del sitio. Aparecerá el icono de 
señalización de archivo. Haga clic en el icono y arrástrelo hasta el objeto con el 
que desea vincularlo: un archivo de la vista de archivo, un documento de 
Dreamweaver abierto en el escritorio o un punto de fijación con nombre en un 
documento abierto en el escritorio. Consulte “Establecer vínculos con 
documentos utilizando el icono de señalización de archivo”, en la página 116. 

Para cambiar un vínculo: 

En Ver mapa del sitio, seleccione la página cuyo vínculo desea cambiar y elija Sitio 

> Cambiar vínculo (Windows) o Sitio > Ver mapa del sitio > Cambiar vínculo 

(Macintosh). Localice el archivo o escriba un URL. 
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Para eliminar un vínculo, lleve a cabo una de estas operaciones: 

• Seleccione la página en el mapa del sitio y elija Sitio > Quitar vínculo 
(Windows) o Sitio > Ver mapa del sitio > Quitar vínculo (Macintosh). 

• Seleccione la página en el mapa del sitio y elija Quitar vínculo en el menú 
contextual. 

Para abrir el origen de un vínculo: 

1 Seleccione un archivo en el mapa del sitio. 

2 Elija Sitio > Abrir origen del vínculo (Windows) o Sitio > Ver mapa del sitio > 
Abrir origen del vínculo (Macintosh). 

Se abrirán el inspector de propiedades y el archivo de origen que contiene el 
vínculo. El vínculo quedará resaltado. 


Mostrar y ocultar archivos de mapa de un sitio 

Puede modificar el diseño del mapa del sitio para mostrar u ocultar los archivos 
ocultos y dependientes. Esto le será de utilidad cuando desee destacar temas o 
contenido clave y que no destaquen otros materiales menos importantes. 

Antes de ocultar o mostrar un archivo HTML, deberá marcarlo como oculto. 
Cuando oculta un archivo marcado como oculto, también se ocultan sus vínculos. 
Al mostrar un archivo marcado como oculto, el icono y sus vínculos se 
encontrarán visibles en la vista del mapa del sitio, aunque los nombres aparecerán 
en cursiva. 

Para marcar archivos como ocultos: 

1 En el mapa del sitio, seleccione uno o más archivos. 

2 Elija Ver > Mostrar/ocultar vínculo (Windows) o Sitio > Ver mapa del sitio > 
Mostrar/ocultar vínculo (Macintosh). 

Para mostrar u ocultar archivos marcados como ocultos, lleve a cabo una de estas 
operaciones: 

• Elija Ver > Mostrar archivos marcados como ocultos (Windows) o Sitio > Ver 
mapa del sitio > Mostrar archivos marcados como ocultos (Macintosh). 

• Seleccione Ver > Diseño (Windows) o Sitio > Ver mapa del sitio > Diseño 
(Macintosh) para abrir el cuadro de diálogo Definición de sitio para y active la 
opción Mostrar archivos marcados como ocultos. 

De forma predeterminada, los archivos dependientes están ocultos. Puede 
especificar si se muestran o no en el mapa del sitio. 
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Para mostrar los archivos dependientes, lleve a cabo una de estas operaciones: 

• Elija Ver > Mostrar archivos dependientes (Windows) o Sitio > Ver mapa del 
sitio > Mostrar archivos dependientes (Macintosh). 

• Seleccione Ver > Diseño (Windows) o Sitio > Ver mapa del sitio > Diseño 
(Macintosh) para abrir el cuadro de diálogo Definición de sitio para y active la 
opción Mostrar archivos dependientes. 


Ver el sitio desde una rama 

Puede ver los detalles de una sección específica de un sitio convirtiendo una rama 
en el centro del mapa del sitio. 

Para ver una rama distinta: 

Seleccione la página que desea ver y elija Ver > Ver como raíz (Windows) o Sitio > 
Ver mapa del sitio > Ver como raíz (Macintosh). 

El mapa del sitio se vuelve a trazar en la ventana como si la página especificada 
fuera la raíz del sitio. El campo Exploración del sitio, situado encima del mapa del 
sitio, muestra la ruta desde la página principal hasta la página especificada. 
Seleccione cualquier elemento de la ruta para ver el mapa del sitio desde dicho 
nivel haciendo clic una vez. 

Para ampliar y contraer las ramas: 

Haga clic en los signos más (+) y menos (-) (Windows) o en las flechas de 
ampliación (Macintosh) para ampliar o contraer la rama. 


Guardar el mapa del sitio 

Puede guardar el mapa del sitio con formato de imagen para verlo (o imprimirlo) 

desde un editor de imágenes. 

Para crear un archivo de imagen del mapa del sitio actual: 

1 En el mapa del sitio, lleve a cabo una de estas operaciones: 

• Si utiliza Windows, en el cuadro de diálogo Guardar mapa del sitio, elija 
Archivo > Guardar mapa del sitio como. En el menú emergente Tipo de 
archivo, seleccione .bmp o .png. 

• Si utiliza Macintosh, seleccione Sitio > Ver mapa del sitio > Guardar mapa del 
sitio > Guardar mapa del sitio como PICT o Sitio > Ver mapa del sitio > 
Guardar mapa del sitio > Guardar mapa del sitio como JPEG. 

2 Introduzca una ubicación y un nombre para la imagen y haga clic en Guardar. 
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Administrar vínculos 


Dreamweaver puede actualizar los vínculos con origen y destino en un documento 
cada vez que éste se mueve o cambia de nombre en un sitio local. Esta 
actualización funciona mejor cuando el sitio (o una sección completa e 
independiente del mismo) está almacenado en la unidad local. No se realizan 
cambios en los archivos del sitio remoto hasta que se colocan o desprotegen los 
archivos en el servidor remoto. 

Para activar la administración de vínculos en Dreamweaver: 

1 Elija Edición > Preferencias y después seleccione General. 

2 Seleccione Siempre o Mensaje en el menú emergente Actualizar vínculos y haga 
clic en Aceptar. 

Si elige Siempre, Dreamweaver actualizará automáticamente todos los vínculos 
con origen y destino en un documento seleccionado cada vez que éste se mueva 
o cambie de nombre. Para obtener instrucciones específicas sobre cómo 
proceder en caso de eliminar un archivo, consulte “Cambiar un vínculo en todo 
el sitio”, en la página 135. Si elige Mensaje, Dreamweaver mostrará primero un 
cuadro de diálogo con todos los archivos afectados por el cambio. Haga clic en 
Actualizar si desea actualizar los vínculos de estos archivos o en No actualizar si 
desea dejar los archivos como estaban. 

Si está activada la función de desprotección/protección, Dreamweaver intentará 
proteger automáticamente el archivo antes de realizar cambios. 

Para acelerar el proceso de actualización, Dreamweaver puede crear un archivo de 
caché en el que almacenará información sobre todos los vínculos del sitio local. 
Este archivo de caché se crea al seleccionar la opción Caché en el cuadro de 
diálogo Definición de sitio y se actualiza de manera invisible cuando se usa 
Dreamweaver para agregar, cambiar o eliminar vínculos a archivos del sitio local. 

Para crear un archivo de caché para el sitio: 

1 Elija Sitio Definir sitios. 

2 Seleccione el sitio en el cuadro de diálogo Definir sitios y, a continuación, haga 
clic en Editar. En la categoría Datos locales, active la casilla de verificación 
Caché en la sección Opciones de gestión de vínculos. 

Para volver a crear una caché para el sitio: 

Elija Sitio > Volver a crear caché de sitio. 
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La primera vez que agregue, cambie o quite vínculos a archivos del sitio local 
después de iniciar Dreamweaver, el programa le pedirá que cargue el caché. Si hace 
clic en Sí, se cargará el caché y se actualizarán automáticamente todos los vínculos 
al archivo que acaba de modificar. Si elige No, el cambio se anotará en el caché, 
pero ésta no se cargará y los vínculos no se actualizarán. 

El caché puede tardar unos minutos en cargarse en sitios grandes. La mayor parte 
de este tiempo se dedicará a comparar las marcas de hora de los archivos del sitio 
local con las marcas grabadas en el caché, con el fin de comprobar si el caché está 
desfasado. Si no ha cambiado ningún archivo fuera de Dreamweaver, puede hacer 
clic en Detener cuando aparezca el botón. 


Cambiar un vínculo en todo el sitio 

Además de configurar Dreamweaver para que actualice los vínculos 
automáticamente cada vez que mueve o cambia de nombre un archivo, puede 
cambiar manualmente todos los vínculos (incluidos los vínculos de secuencia de 
comandos, rnailto, FTP y nulos) para que señalen a otro lugar. Puede utilizar esta 
opción en cualquier momento. Por ejemplo, puede vincular las palabras “películas 
del mes” a /películas/julio.html en todo el sitio y el I o de agosto deberá cambiar 
esos vínculos para que señalen a /películas/agosto.html. Sin embargo, esta función 
resulta particularmente útil para eliminar un archivo con el que están vinculados 
otros archivos. 

Para cambiar un vínculo en todo el sitio: 

1 Seleccione un archivo en el panel Local de la ventana Sitio. 

2 Elija Sitio > Cambiar vínculo en todo el sitio. 

3 En el cuadro de diálogo que aparece, haga clic en el icono de carpeta para 
localizar y seleccionar un archivo, o en el campo Por vínculos a, escriba la ruta y 
el nombre de un archivo nuevo con el que desea establecer un vínculo. 

4 Haga clic en Aceptar. 

Dreamweaver actualizará todos los documentos vinculados al archivo 
seleccionado, haciendo que señalen al nuevo archivo y usando el formato de 
ruta empleado por el documento (por ejemplo, si la ruta antigua era relativa al 
documento, la nueva también deberá serlo). 

Después de cambiar un vínculo en todo el sitio, el archivo seleccionado quedará 
huérfano (es decir, ningún archivo de la unidad local estará vinculado a él). 
Entonces podrá borrarlo sin romper ningún vínculo del sitio local. 

Nota: Recuerde que, dado que todos los cambios se realizan localmente, necesitará borrar 
manualmente el archivo correspondiente en el sitio remoto y colocar o desproteger los 
archivos cuyos vínculos haya modificado para que los visitantes del sitio puedan ver los 
cambios efectuados. 
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Para cambiar vínculos de secuencia de comandos, correo electrónico, FTP o nulos 
en todo el sitio: 

1 Abra el mapa del sitio. 

2 Elija Sitio > Cambiar vínculo en todo el sitio. 

3 En el cuadro de diálogo Cambiar vínculo en todo el sitio, introduzca la 
información siguiente: 

• En el campo Cambiar todos los vínculos a, escriba el nombre completo del 
vínculo que desea cambiar. 

• En el campo Por vínculos a, escriba el nombre completo del vínculo con el que 
desea reemplazarlo. 

4 Haga clic en Aceptar. 

Por ejemplo, para actualizar todos los vínculos de correo electrónico que señalan a 
su antigua dirección, puede escribir mailto:juser@isp.com en el cuadro Cambiar 
todos los vínculos a, y mailto:juser-interface@isp.com en el cuadro Por vínculos 
a. 

Comprobar vínculos 

Los vínculos no están activos en la ventana de documento, es decir, al hacer clic en 
un vínculo no salta al documento vinculado. Si desea editar un archivo asociado 
con un vínculo puede abrirlo en Dreamweaver. Sin embargo, para comprobar los 
vínculos deberá utilizar un explorador. Consulte “Comprobación del sitio”, en la 
página 166. 

Para comprobar vínculos en un explorador: 

Elija Archivo > Vista previa en el explorador o haga clic en F12. 

Es preciso realizar una vista previa de las páginas en un explorador para comprobar 
los vínculos. 

Para abrir documentos vinculados en Dreamweaver, lleve a cabo una de estas 
operaciones: 

• Seleccione el vínculo y elija Modificar > Abrir página vinculada. 

• Pulse Control (Windows) o Comando (Macintosh) y haga doble clic en el 
vínculo. 

Nota: El documento vinculado debe encontrarse en el disco local. 
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Adjuntar comportamientos a vínculos 

Puede adjuntar un comportamiento a cualquier vínculo de un documento. Puede 
emplear los comportamientos siguientes a la hora de insertar elementos vinculados 
a los documentos. 

Definir texto de barra de estado Muestra un mensaje en la barra de estado, que se 
encuentra en la parte inferior de la ventana del explorador. Por ejemplo, puede 
usar esta acción para describir el destino de un vínculo en la barra de estado en 
lugar de mostrar el URL al que está asociado. Para ver un ejemplo de mensaje de 
estado, mueva el cursor por encima de cualquiera de los botones de exploración de 
Dreamweaver Help Pages. Consulte “Definir texto de barra de estado”, en la 
página 325- 

Abrir ventana del explorador Sirve para abrir un URL en una nueva ventana. Se 
pueden especificar las propiedades de la nueva ventana, incluidos su tamaño, sus 
atributos (si se puede cambiar su tamaño, si tiene barra de menús, etc.) y su 
nombre. Consulte “Abrir ventana del explorador”, en la página 318. 

Definir Imagen de barra de exploración Permite cambiar el comportamiento de 
una barra de exploración. Utilícelo para personalizar la visualización de las 
imágenes en una barra de exploración. Por ejemplo, cuando el cursor se encuentra 
sobre un botón, cambia la visualización de las otras imágenes de la barra de 
exploración o del documento. Consulte “Definir Imagen de barra de exploración”, 
en la página 322. 

Comportamiento de menú de salto Sirve para editar un menú de salto. Puede 
realizar cambios en la lista de menú o el archivo con el que está vinculado, o bien 
puede cambiar en qué ubicación del explorador se abre un documento vinculado. 
Consulte “Menú de salto”, en la página 317. 
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CAPÍTULO 5 

Administrar sitios 


Dreamweaver ayuda a organizar los archivos de los sitios local y remoto. Permite 
duplicar fácilmente la estructura del sitio local en un servidor remoto o la 
estructura de un sitio Web remoto en el sistema local. Los vínculos relativos 
creados en el sitio local siguen funcionando después de transferir los archivos al 
sitio remoto porque la estructura de ambos emplazamientos es idéntica. 

Para crear un sitio local en Dreamweaver, cree una carpeta raíz local (o convierta 
una carpeta existente en la carpeta raíz local) utilizando el comando Nuevo sitio 
(consulte “Crear un sitio local”, en la página 78). A continuación, asocie el sitio 
local a un servidor remoto con el comando Deñnir sitios (consulte “Asociar un 
servidor remoto a un sitio local”, en la página 140). 

Al transferir archivos entre sitios locales y remotos, Dreamweaver mantiene 
estructuras paralelas de archivos y carpetas entre ambos emplazamientos. Si las 
carpetas necesarias no existen aún en el sitio al que se transfieren los archivos, 
Dreamweaver las creará automáticamente. También puede sincronizar los archivos 
entre los sitios locales y remotos. Si es necesario, Dreamweaver copia los archivos 
en ambos sentidos y, opcionalmente, elimina los no deseados. 

Dreamweaver incluye una serie de funciones que permite estructurar un sitio y 
transferir los archivos a un servidor remoto. Para facilitar la colaboración en el sitio 
Web, puede desproteger y proteger los archivos del servidor remoto. De este 
modo, si usted está trabajando con un archivo, los otros usuarios lo sabrán y no lo 
editarán al mismo tiempo. Sin embargo, cabe destacar que Dreamweaver no 
realiza control de versiones. 
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Configurar un sitio remoto 

Antes de configurar un sitio remoto, cree un sitio local (que posteriormente 
asociará con el sitio remoto). Consulte “Crear un sitio local”, en la página 78. 

El paso siguiente a la hora de configurar un sitio remoto consiste en determinar 
dónde se va a situar el sitio, es decir, qué servidor lo albergará. Su cliente, su 
empresa o su proveedor de servicios Internet (ISP) disponen probablemente de un 
servidor configurado para albergar páginas Web (Internet o intranet). Pregunte al 
administrador del sistema o a su cliente el nombre de dicho servidor y cómo se 
realizan las transferencias de archivos. 

En particular, averigüe si se utiliza FTP para conectar con el servidor o si puede 
montar el servidor como una unidad de disco con acceso de red desde su 
escritorio. Si conecta utilizando FTP, averigüe el nombre del servidor FTP. 

Cuando reúna esta información, utilice el comando Definir sitios para asociar el 
servidor al sitio local. Si surgen problemas a la hora de configurar el sitio remoto, 
consulte “Solución de problemas de configuración de sitios remotos”, en la 
página 143. 

Una vez configurado el sitio remoto, puede cargar o descargar archivos si dispone 
de ellos en el sitio. Consulte “Usar el sistema de desprotección/protección”, en la 
página 148 y “Obtener y colocar archivos”, en la página 151. 


Asociar un servidor remoto a un sitio local 

Después de crear un sitio local, use el comando Definir sitios para agregar o 
cambiar la información del servidor remoto asociado y las preferencias de 
desprotección/protección. 


Para asociar un servidor remoto a un sitio local existente: 

1 Elija Definir sitios en el menú emergente de sitios actuales de la ventana Sitio, o 
bien elija Sitio > Definir sitios. 



2 Aparecerá un cuadro de diálogo con los sitios definidos actualmente. Seleccione 
un sitio existente y haga clic en Editar. Si no dispone de sitios definidos, cree 
sitio local antes de continuar (consulte “Crear un sitio local”, en la página 78). 
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3 En la lista Categoría de la izquierda, haga clic en Datos del servidor Web. 

4 Elija una de las siguientes opciones de Acceso al servidor: 

• Utilice Ninguno si no tiene previsto cargar el sitio en un servidor. A 
continuación, haga clic en Aceptar y omita el resto de este procedimiento. 

• Utilice Local/red si el servidor Web está montado como unidad de red 
(Windows) o como servidor AppleTalk o NFS (Macintosh), o si lo está 
ejecutando en el equipo local. Haga clic en el icono de carpeta para localizar y 
seleccionar la carpeta del servidor donde se almacenan los archivos. Si desea que 
el panel Remoto de la ventana Sitio se actualice automáticamente a medida que 
se agreguen y borren archivos, seleccione la opción Actualizar lista archivos 
remotos autom. Para aumentar la velocidad de transferencia de archivos al sitio 
remoto, deje esta opción desactivada. Para actualizar manualmente la ventana 
Sitio en cualquier momento, haga clic en el botón Actualizar de la misma. Haga 
clic en Aceptar y omita el resto de este procedimiento. 

Nota: Para actualizar manualmente sólo el panel Remoto, elija Ver > Actualizar remoto 
en la ventana Sitio (Windows) o Sitio > Ver archivos del sitio > Actualizar remoto 
(Macintosh). 

• Utilice FTP si conecta con el servidor Web a través de FTP. 

5 Introduzca el nombre del servidor FTP en el que cargará los archivos del sitio 
Web. 

El nombre del servidor FTP es el nombre completo de un sistema informático 
en Internet, como ftp.mindspring.com o shelI16.ba.best.com. Introduzca el 
nombre completo del servidor sin texto adicional. Sobre todo, no agregue un 
nombre de protocolo delante del nombre del servidor. Por ejemplo: 

• Correcto: ftp.mindspring.com 

• Incorrecto: ftp://ftp.mindspring.com 

• Incorrecto: mindspring.com 

6 Introduzca el nombre del directorio servidor del sitio remoto donde se 
almacenan los documentos visibles para el público (también denominado raíz 
del sitio). Consulte “Determinar el directorio raíz del sitio remoto”, en la 
página 142. 

Por ejemplo, el directorio servidor del sitio Web dreamcentral es public_html/. 
Para otros sitios, el directorio puede tener varios niveles de profundidad (como 
www/public/docs/ o public_html/htdoc/) o ser el directorio de conexión (en 
cuyo caso este campo debería quedar en blanco). 
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7 Introduzca el nombre de conexión y la contraseña que utiliza para conectar con 
el servidor FTP. 

Dreamweaver guarda la contraseña de forma predeterminada. Desactive 
Guardar si prefiere que el sistema le solicite la contraseña cada vez que conecte 
con el servidor remoto. 

8 Seleccione las opciones deseadas de cortafuegos para el sitio: 

• Active la opción Usar cortafuegos si conecta con el servidor remoto desde el 
otro lado de un cortafuegos. Consulte “Configurar preferencias de FTP del 
sitio”, en la página 146. 

• Algunos cortafuegos requieren el uso de FTP pasivo, que permite que el 
software local configure la conexión FTP en lugar de solicitárselo al servidor 
remoto. Seleccione la opción Utilizar FTP pasivo si la configuración de 
cortafuegos lo requiere. Si no está seguro de utilizar esta opción, consulte con el 
administrador local de cortafuegos. 

9 Haga clic en Aceptar. 

Determinar el directorio raíz del sitio remoto 

El directorio servidor que especifique en el cuadro de diálogo Definir sitios deberá 
ser la carpeta raíz del sitio remoto. Si la estructura del sitio remoto no coincide con 
la del sitio local, los archivos se cargarán en el lugar incorrecto y los visitantes del 
sitio no podrán verlos. 


En este caso no debería ser 
Directorio del Servidor 


•i local site root folder 
É □ assets 

ffl" □ html 

No debería ser 
Directorio del Servidor 

Debería ser Directorio 
del Servidor 


login director^ 

-- ►B-^ public_html — 

— ►£} _| assets 

B Qj html 


Nota: El directorio raíz remoto deberá haberse creado antes de que Dreamweaver intente 
conectar con él. Si no dispone de directorio raíz en el servidor remoto para el sitio, créelo 
antes de intentar conectar. Si usted no puede, solicite al administrador del servidor que lo 
haga. 
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Si no está seguro de lo que debe introducir en el campo Directorio del Servidor, 
déjelo en blanco. En algunos servidores, el directorio raíz es el directorio con el 
que se conecta en primer lugar a través de FTP. Para averiguar si es así, conecte con 
el servidor. Si aparece en el panel Remoto una carpeta con un nombre del tipo 
public_html o www o el nombre de conexión que usted utiliza, probablemente ése 
sea el directorio que debe usar en el campo Directorio del Servidor. Anote el 
nombre del directorio, desconecte y vuelva a abrir el cuadro de diálogo Definición 
de sitio. Introduzca el nombre del directorio en el campo Directorio del Servidor y 
vuelva a conectar. 

Solución de problemas de configuración de sitios remotos 

Un servidor Web se puede configurar de varias formas. En esta sección se ofrece 
información sobre algunos problemas comunes que pueden surgir a la hora de 
configurar un sitio remoto, así como sobre la forma de solucionarlos. 

• Es posible que la implementación FTP de Dreamweaver no funcione 
correctamente con algunos servidores proxy, cortafuegos multinivel y otras 
formas de acceso indirecto al servidor. Si surgen problemas con el acceso FTP, 
solicite ayuda al administrador del sistema local. 

• Con algunas conexiones lentas, el intervalo de espera FTP de 60 segundos 
genera un número excesivo de temporizaciones. Incremente este valor (en el 
panel FTP del sitio del cuadro de diálogo Preferencias) si experimenta 
temporizaciones frecuentes. Sin embargo, no lo aumente excesivamente o de lo 
contrario tendrá que esperar mucho tiempo cuando realmente no se pueda 
establecer una conexión. En general, los intervalos de espera de 30 a 120 
segundos son los más útiles. 

• Los nombres de archivo y carpeta que contienen espacios y caracteres especiales 
suelen ocasionar problemas en las transferencias a sitios remotos. Utilice 
caracteres de subrayado en lugar de espacios y evite los caracteres especiales en 
los nombres de archivo y carpeta siempre que esto sea posible. En concreto, 
pueden causar problemas en los nombres de archivo o de carpeta signos como 
los dos puntos, el guión, el punto y el apostrofe. Los caracteres especiales en los 
nombres de archivo o carpeta también pueden impedir que Dreamweaver cree 
un mapa del sitio. 

• En Macintosh, los nombres de archivo no pueden tener más de 31 caracteres. Si 
experimenta problemas con nombres largos de archivo, acórtelos. 

• Muchos servidores utilizan vínculos simbólicos (UNIX), accesos abreviados 
(Windows) o alias (Macintosh) para conectar una carpeta de una parte del 
disco del servidor con otra carpeta situada en otro emplazamiento. Por ejemplo, 
el subdirectorio public_html del directorio principal del servidor puede ser en 
realidad un vínculo con cualquier parte del servidor. En la mayoría de los casos, 
esos alias no tiene ninguna repercusión sobre la capacidad de conectar con la 
carpeta o el directorio correspondientes, pero si puede conectar con una parte 
del servidor y no con otra, es posible que haya un problema de alias. 
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• En general, cuando surja un problema con una transferencia FTP, examine el 
registro FTP. Para ello, elija Ventana > Registro FTP de sitio en la ventana Sitio 
(Windows) o Sitio > Registro FTP (Macintosh). Si aparece un mensaje de error 
del tipo “no se puede colocar archivo”, es posible que el sitio remoto se haya 
quedado sin espacio. Examine el registro FTP para obtener información más 
detallada. 


Ventana Sitio 

Utilice la ventana Sitio para llevar a cabo operaciones estándar de mantenimiento 
de archivos, como crear documentos HTML, mover archivos, crear carpetas y 
eliminar elementos; para diseñar la exploración del sitio con un mapa (consulte 
“Ver la estructura del sitio”, en la página 127), y para transferir archivos entre los 
sitios local y remoto. De forma predeterminada, el sitio remoto (o mapa del sitio) 
aparece en el panel izquierdo y el sitio local, en el derecho. Puede cambiar esta 
configuración en las preferencias de FTP del sitio. Consulte “Configurar 
preferencias de FTP del sitio”, en la página 146. 
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Usar los controles de la ventana Sitio 


Para abrir la ventana Sitio, elija Ventana > Archivos del sitio. A continuación, 
utilice los botones y las opciones siguientes para establecer qué muestra la ventana 
Sitio y para transferir archivos entre los sitios local y remoto: 

Ver archivos del sitio Muestra la estructura de archivos del sitio remoto o local en 
el panel intercambiable de la ventana Sitio. El panel intercambiable es aquél que 
no se ha configurado de manera permanente para un determinado sitio en la 
sección FTP del sitio del cuadro de diálogo Preferencias (consulte “Configurar 
preferencias de FTP del sitio”, en la página 146). Ésta es la vista predeterminada 
de la ventana Sitio. 

Ver mapa del sitio En el panel intercambiable de la ventana Sitio, muestra un 
mapa visual del sitio basado en los vínculos establecidos entre documentos. El 
panel intercambiable es aquél que no se ha configurado de manera permanente 
para un determinado sitio en la sección FTP del sitio del cuadro de diálogo 
Preferencias (consulte “Configurar preferencias de FTP del sitio”, en la 
página 146). Mantenga pulsado el botón para elegir Sólo mapa o Mapa y archivos 
en el menú emergente. 

Menú emergente de sitios actuales Muestra los sitios que ha definido. Para 
cambiar a otro sitio, selecciónelo en la lista. Para agregar un sitio o editar la 
información de un sitio existente, elija Definir sitios en la parte inferior de la lista 
(consulte “Asociar un servidor remoto a un sitio local”, en la página 140). 

Conectar/desconectar (disponible sólo con la configuración FTP) Conecta o 
desconecta del sitio remoto. De forma predeterminada, Dreamweaver desconecta 
del sitio remoto si permanece inactivo durante más de 30 minutos. Elija Edición > 
Preferencias y seleccione FTP del sitio para cambiar este límite de tiempo. 

Actualizar Actualiza las listas de los directorios local y remoto. Utilice este botón para 
actualizar manualmente las listas de directorios si ha desactivado las opciones 
Actualizar lista archivos locales autom. o Actualizar lista archivos remotos autom. (sólo 
configuración de Local/red) en el cuadro de diálogo Definición de sitio (consulte 
“Asociar un servidor remoto a un sitio local”, en la página 140). Utilice también este 
botón para hacer que aparezca la lista de directorios remotos cuando se ha montado la 
unidad que contiene el sitio remoto después de abrir la ventana Sitio. 

Obtener Copia los archivos seleccionados desde el sitio remoto hasta el sitio local. 
Si está activada la opción Permitir desproteger y proteger archivo, las copias locales 
serán de sólo lectura. Los archivos permanecerán disponibles en el sitio remoto 
para que otros miembros del equipo los protejan. Si está desactivada la opción 
Permitir desproteger y proteger archivo y se obtiene un archivo, se transferirá una 
copia de éste con privilegios de lectura y escritura. Observe que los archivos 
copiados son los seleccionados en el panel de la ventana Sitio que esté activo. Si el 
panel Remoto está activo, los archivos remotos seleccionados se copiarán en el 
sitio local. Si, por el contrario, es el panel Local el que está activo, las versiones 
remotas de los archivos locales seleccionados se copiarán en el sitio local. Consulte 
“Obtener archivos de un servidor remoto”, en la página 151. 
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Colocar Copia los archivos seleccionados desde el sitio local hasta el sitio remoto. 
Observe que los archivos copiados son los seleccionados en el panel de la ventana 
Sitio que esté activo. Si el panel Local está activo, los archivos locales seleccionados 
se copiarán en el sitio remoto. Si, por el contrario, es el panel Remoto el que está 
activo, las versiones locales de los archivos remotos seleccionados se copiarán en el 
sitio remoto. Consulte “Colocar archivos en un servidor remoto”, en la 
página 153. 

Proteger Transfiere una copia del archivo desde el servidor remoto hasta el sitio 
local (sobrescribiendo la copia local existente del archivo, en su caso) y marca el 
archivo como protegido en el servidor. Esta opción no está disponible si está 
desactivada la opción Permitir desproteger y proteger archivo para el sitio actual. 
Consulte “Desproteger y proteger archivos en un servidor remoto”, en la 
página 149. 

Desproteger Transfiere una copia del archivo local al servidor remoto y permite 
que otros usuarios lo editen. El archivo local se convierte en archivo de sólo 
lectura. Esta opción no está disponible si está desactivada la opción Permitir 
desproteger y proteger archivo para el sitio actual. Consulte “Desproteger y 
proteger archivos en un servidor remoto”, en la página 149. 

Detener tarea actual Cancela la actividad en curso, incluidas la obtención y la 
colocación de archivos. El botón aparece en la esquina inferior derecha con forma 
de señal roja de “stop” con una X blanca. Observe que es posible que el servidor 
tarde un tiempo en procesar la solicitud de parada, por lo que la transferencia de 
archivos no se detendrá inmediatamente. 


Configurar preferencias de FTP del sitio 

Elija Edición > Preferencias y seleccione FTP del sitio. A continuación podrá 
configurar las siguientes preferencias de FTP del sitio para controlar las opciones 
de transferencia de archivos disponibles en la ventana Sitio : 

Mostrar siempre Especifica qué sitio (remoto o local) se muestra siempre y en qué 
panel de la ventana Sitio (izquierdo o derecho) aparecen los archivos locales y los 
remotos. El sitio local siempre aparece a la derecha de forma predeterminada. El 
panel no seleccionado (de forma predeterminada, el izquierdo) es el panel 
intercambiable. Ese panel puede mostrar el mapa del sitio o los archivos del otro 
sitio (de forma predeterminada, el sitio remoto). 

Archivos dependientes Muestra un mensaje para transferir archivos dependientes 
(como imágenes, hojas de estilos externas y otros archivos a los que se hace 
referencia en el archivo HTML) que el explorador carga con el archivo HTML. 
Las opciones Mensaje al obtener/proteger y Mensaje al colocar/desproteger están 
activadas de forma predeterminada. 

Nota: Para que aparezca el mensaje Incluir archivos dependientes incluso cuando estas 
opciones están desactivadas, pulse Alt (Windows) u Opción (Macintosh) mientras selecciona 
los comandos Obtener, Colocar, Desproteger o Proteger. 
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Conexión FTP Determina si se interrumpe la conexión al sitio remoto cuando 
transcurre el número de minutos especificado sin actividad. 

Tiempo de espera FTP Especifica la cantidad de segundos durante la cual 
Dreamweaver intentará establecer una conexión con el servidor remoto. Si no hay 
respuesta después del período de tiempo especificado, Dreamweaver mostrará un 
cuadro de diálogo de advertencia. 

Servidor de cortafuegos Especifica la dirección del servidor proxy con el que 
establecerá la conexión si se encuentra al otro lado de un cortafuegos. Si no está al 
otro lado de un cortafuegos, deje este espacio en blanco. 

Nota: Si se encuentra detrás de un cortafuegos, seleccione la opción Usar cortafuegos en el 
cuadro de diálogo Definición de sitio. Consulte "Asociar un servidor remoto a un sitio local”, 
en la página 140. 

Puerto de cortafuegos Especifica el puerto por el cual se establece la conexión con 
el servidor FTP. Si conecta por un puerto distinto del 21 (predeterminado para 
FTP), introduzca aquí el número. 

Opciones de Colocar: Guardar archivos antes de colocar Indica que los archivos no 
guardados se guardarán sin advertencia antes de colocarlos en el sitio remoto. 

Definir sitios Abre el cuadro de diálogo Definir sitios, en el que podrá editar un 
sitio existente o crear uno nuevo. Consulte “Asociar un servidor remoto a un sitio 
local”, en la página 140. 

También puede definir si los tipos de archivos que desea transferir deberán hacerlo 
en formato ASCII (texto) o binario. Para ello, abra el archivo 
FTPExtensionMap.txt de la carpeta Dreamweaver/Configuration. Puede 
modificar y borrar la lista de tipos de archivos que se transfieren en cada formato, 
así como agregar sus propios tipos de archivos. Si una extensión de archivo no está 
definida en este archivo, Dreamweaver transferirá automáticamente el archivo en 
formato binario. 

Nota: En Macintosh, el archivo FTPExtensionMap.txt también contiene información sobre la 
asignación de extensiones de archivos a creadores y tipos de archivo Macintosh. Esta 
asignación permite establecer el icono correcto para los archivos descargados, así como 
abrirlos con la aplicación correspondiente cuando se hace doble clic en ellos en el Flnder. 

Observe que cuando un archivo se transfiere en formato ASCII se ignora la 
configuración de salto de línea que se haya definido. Consulte “Configurar 
preferencias de formato HTML”, en la página 344. 
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Usar el sistema de desprotección/protección 

Si trabaja en colaboración con otros usuarios, puede desproteger y proteger los 
archivos para transferirlos entre el servidor remoto y el ordenador local. Consulte 
“Desproteger y proteger archivos en un servidor remoto”, en la página 149. 

Proteger un archivo equivale a decir: “Estoy trabajando con este archivo. ¡No lo 
toquen!” Cuando un archivo está protegido, Dreamweaver muestra una marca de 
verificación al lado de su icono en la ventana Sitio. Una marca de verificación 
verde indica que usted ha protegido el archivo, mientras que una marca roja indica 
que lo ha protegido otro usuario. El nombre de la persona que ha protegido el 
archivo también aparece en el ventana Sitio. 

Al desproteger un archivo, éste queda a disposición de otros miembros del equipo, 
que podrán protegerlo y editarlo. La versión local se convierte en versión de sólo 
lectura para impedir que usted efectúe cambios en el archivo mientras otro usuario 
lo tiene protegido. 

Nota: Aunque no es necesario conocer esto para utilizar el sistema de desprotección/ 
protección, Dreamweaver realiza un seguimiento de los archivos protegidos colocando un 
archivo de texto con la extensión .Ick tanto en el servidor remoto como en el sitio local. Los 
archivos .Ick no se muestran en la ventana Sitio. Cada archivo .Ick contiene el nombre del 
usuario que tiene protegido el archivo actualmente. 

Dreamweaver no convierte los archivos protegidos en archivos de sólo lectura en el 
servidor remoto. Si transfiere archivos con una aplicación distinta de 
Dreamweaver es posible que se sobrescriban los archivos protegidos. Sin embargo, 
en aplicaciones distintas de Dreamweaver, el archivo .Ick figura al lado del archivo 
protegido en la jerarquía de archivos para ayudar a evitar errores de ese tipo. 

Puede activar la desprotección o la protección para algunos sitios y desactivarla 
para otros. Para obtener información sobre la transferencia de archivos entre sitios 
locales y remotos sin desprotegerlos ni protegerlos, consulte “Obtener archivos de 
un servidor remoto”, en la página 151 y “Colocar archivos en un servidor 
remoto”, en la página 153. 
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Configurar el sistema de desprotección/protección 

Para usar el sistema de desprotección/protección, deberá configurar algunas 
opciones. 

Nota: Si desea utilizar el sistema de desprotección/protección, deberá asociar el sitio local a 
un servidor de red o FTP remoto. Consulte "Asociar un servidor remoto a un sitio local", en 
la página 140. 


Para configurar las opciones de desprotección/protección: 

1 Elija Sitio > Definir sitios, seleccione un sitio y haga clic en Editar. 

2 En la lista Categoría de la izquierda, haga clic en Desproteger/proteger. 

• Active la opción Permitir desproteger y proteger archivo si trabaja en 
colaboración (o si trabaja en solitario con varios sistemas). 

Esta opción resulta útil para advertir a otros usuarios que usted ha protegido un 
archivo para editarlo. También puede servir para recordar que ha dejado una 
versión más reciente de un archivo en otro equipo. Consulte “Usar el sistema de 
desprotección/protección”, en la página 148. 

• Active la opción Proteger archivos al abrir si desea proteger automáticamente 
los archivos cuando haga doble clic en ellos para abrirlos desde la ventana Sitio. 
Si utiliza Archivo > Abrir para abrir un archivo, éste no quedará protegido 
incluso cuando está activada esta opción. 

• Introduzca un nombre de protección. 

Este nombre aparecerá en la ventana Sitio junto con los archivos protegidos, lo 
que permitirá a otros miembros del equipo localizarle si usted tiene un archivo 
que necesitan. Si trabaja en solitario con varios sistemas, utilice un nombre de 
protección en cada equipo (por ejemplo, JoseR-MacCasa y JoseR-PCOficina) 
para saber dónde se encuentra la última versión del archivo si olvida volver a 
desprotegerlo. 

Desproteger y proteger archivos en un servidor remoto 

Utilice la ventana Sitio o el menú Sitio de la ventana de documento para 
desproteger y proteger archivos en un servidor remoto. 

Si ha protegido un archivo pero decide no editarlo (o decide descartar los cambios 
realizados), puede deshacer la protección para que el archivo esté a disposición de 
los otros miembros del equipo. 

Nota: Si selecciona Sitio > Desproteger o Sitio > Proteger mientras la ventana de 
documento está activa y el archivo actual no forma parte del sitio abierto actualmente, 
Dreamweaver intentará determinar a cuál de los sitios definidos localmente pertenece el 
archivo actual. Si pertenece a un solo sitio local, Dreamweaver abrirá ese sitio y realizará la 
operación de desprotección o de protección. 
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Para proteger archivos de un servidor remoto: 

1 Elija el sitio deseado en el menú emergente de sitios actuales de la parte 
superior de la ventana Sitio. 

2 Proteja archivos utilizando uno de los métodos siguientes: 

• Seleccione uno o más archivos y haga clic en el botón Proteger de la parte 
superior de la ventana Sitio. 

• Elija Proteger en el menú contextual o el menú Sitio. 

3 Para descargar archivos dependientes junto con los archivos seleccionados, haga 
clic en Sí. Para evitar que se descarguen los archivos dependientes, haga clic en 
No. 

Para desproteger archivos de un servidor remoto: 

1 Elija el sitio deseado en el menú emergente de sitios actuales de la parte 
superior de la ventana Sitio. 

2 Seleccione uno o más archivos protegidos o nuevos en el panel Local y lleve a 
cabo una de estas operaciones: 

• Haga clic en el botón Desproteger de la parte superior de la ventana Sitio. 

• Elija Desproteger en el menú contextual o el menú Sitio. 

Los archivos que usted haya protegido aparecerán con una marca de 
verificación verde. Si un archivo tiene una marca de verificación roja a su lado, 
se encuentra protegido actualmente por otro usuario. No desproteja esos 
archivos. 

Un símbolo de candado indica que el archivo es de sólo lectura (Windows) o 
está bloqueado (Macintosh). 

Los archivos nuevos no tienen marca de verificación ni símbolo de candado a su 
lado. 

3 Para cargar archivos dependientes junto con el archivo seleccionado, haga clic 
en Sí. Para evitar que se carguen los archivos dependientes, haga clic en No. 
Suele resultar conveniente cargar archivos dependientes cuando se desprotege 
un archivo nuevo, pero si las últimas versiones de los archivos dependientes ya 
se encuentran en el servidor remoto no hay necesidad de volver a cargarlos. 

Para deshacer una protección: 

Seleccione el archivo deseado y elija Sitio Deshacer proteger o haga clic con el 
botón derecho del ratón (Windows) o mientras pulsa la tecla Control (Macintosh) 
en el archivo y elija Deshacer proteger en el menú contextual. La copia local del 
archivo se hará de sólo lectura y se perderán los cambios realizados. 
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Nota: También puede desproteger y proteger un archivo que se encuentra activo en la 
ventana de documento. En la ventana de documento, elija Sitio > Desproteger o Sitio > 
Proteger. Si protege el archivo activo, la nueva versión protegida sobrescribirá la versión del 
archivo abierta actualmente. Si desprotege el archivo activo, es posible que éste se guarde 
automáticamente antes de desprotegerse. Dependerá de las opciones que haya configurado 
(consulte "Configurar preferencias de FTP del sitio", en la página 146). 


Obtener y colocar archivos 

Si trabaja en colaboración con otros usuarios, use el sistema de desprotección/ 
protección para transferir archivos entre los sitios local y remoto (consulte “Usar el 
sistema de desprotección/protección”, en la página 148). Sin embargo, si es usted 
la única persona que trabaja en el sitio remoto, puede utilizar los comandos 
Obtener y Colocar para transferir los archivos sin desprotegerlos ni protegerlos. 

Nota: Si selecciona Sitio > Obtener o Colocar mientras la ventana de documento está activa 
y el archivo actual no forma parte del sitio abierto actualmente, Dreamweaver intentará 
determinar a cuál de los sitios definidos localmente pertenece el archivo actual. Si pertenece 
a un solo sitio local, Dreamweaver abrirá ese sitio y realizará la operación de Obtener o 
Colocar. 


Obtener archivos de un servidor remoto 

Al obtener archivos, éstos se copian desde el sitio remoto hasta el sitio local. 

Si utiliza el sistema de desprotección/protección (es decir, si está activada la opción 
Permitir desproteger y proteger archivo), el comando Obtener generará una copia 
local de sólo lectura. El archivo permanecerá disponible en el sitio remoto para 
que otros miembros del equipo lo protejan. Si está desactivada la opción Permitir 
desproteger y proteger archivo y se obtiene un archivo, se transferirá una copia de 
éste con privilegios de lectura y escritura. Consulte “Usar el sistema de 
desprotección/protección”, en la página 148. 

Nota: Si trabaja en colaboración con otros usuarios en los mismos archivos, no es 
recomendable desactivar la opción Permitir desproteger y proteger archivo. En particular, si 
otros usuarios utilizan el sistema de desprotección/protección con el sitio, usted deberá 
emplear también ese sistema. 

Observe que los archivos que se copian al hacer clic en Obtener son los que están 
seleccionados en el panel activo de la ventana Sitio. Si el panel Remoto está activo, 
los archivos remotos seleccionados se copiarán en el sitio local. Si, por el contrario, 
es el panel Local el que está activo, las versiones remotas de los archivos locales 
seleccionados se copiarán en el sitio local. 

Si no trabaja en colaboración con otros usuarios y desea obtener archivos con 
privilegios de lectura/escritura, desactive la opción Permitir desproteger y proteger 
archivo para el sitio (consulte “Asociar un servidor remoto a un sitio local”, en la 
página 140). 
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Para obtener sólo aquellos archivos cuya versión remota sea más reciente que la 
versión local, use el comando Sincronizar (consulte “Sincronizar los archivos de 
los sitios locales y remotos”, en la página 154). 


Para obtener archivos de un servidor remoto: 

1 Elija Ventana > Archivos del sitio para abrir la ventana Sitio. 

2 Elija el sitio deseado en el menú de sitios de la parte superior de la ventana 
Sitio. 

3 Si utiliza FTP para transferir archivos, haga clic en Conectar para abrir una 
conexión con el servidor remoto. 

Si ya hay una conexión abierta (el botón Conectar indicará Desconectar), omita 
este paso. Si los archivos remotos son visibles en el panel Remoto de una 
conexión anterior, no es necesario hacer clic en Conectar. Cuando hace clic en 
Obtener, Dreamweaver conecta automáticamente. 

4 Seleccione los archivos que desea descargar. Generalmente se seleccionan en el 
panel Remoto, pero, si lo prefiere, puede seleccionar los archivos 
correspondientes en el panel Local. 

5 Haga clic en Obtener o elija Obtener en el menú contextual o el menú Sitio. Si 
el archivo está abierto en una ventana de documento, puede elegir Sitio > 
Obtener en la ventana. 

6 Para descargar archivos dependientes, haga clic en Sí. Para omitirlos, haga clic 
en No. Si ya dispone de copias locales de los archivos dependientes, haga clic en 
No. Para evitar que vuelva a aparecer la pregunta sobre archivos dependientes 
en futuras transferencias, active la opción No volver a preguntar. 

Nota: Para detener la transferencia de archivos en cualquier momento, haga clic en el botón 
Detener tarea actual (la señal roja de "stop" con la X blanca en la esquina inferior derecha 
de la ventana Sitio) o pulse la tecla Esc (Windows) o Comando + punto (Macintosh). Es 
posible que la transferencia no se detenga inmediatamente. 

Dreamweaver registra toda la actividad de transferencia de archivos FTP. Si se 
produce un error mientras transfiere un archivo con FTP, el registro de FTP del 
sitio podrá ayudarle a determinar el problema. Para mostrar el registro, elija 
Ventana > Registro FTP en la ventana Sitio (Windows) o Sitio > Registro FTP 
(Macintosh). 



Colocar archivos en un servidor remoto 


Al colocar archivos, éstos se copian desde el sitio local hasta el sitio remoto, 
generalmente sin cambiar su estado de protección. Hay dos situaciones frecuentes 
en las que se utiliza Colocar en lugar de Desproteger: cuando no trabaja en 
colaboración con otros usuarios ni utiliza el sistema de desprotección/protección o 
cuando desea colocar la versión actual del archivo en el servidor pero va a seguir 
editándolo. 

Nota: Si coloca un archivo que anteriormente no estaba presente en el sitio remoto y utiliza 
el sistema de desprotección/protección, el archivo se copiará en el sitio remoto y, a 
continuación, quedará protegido para usted de modo que pueda seguir editándolo. 

Si desea colocar un archivo en un servidor remoto y desprotegerlo, utilice el 
comando Desproteger. Consulte “Desproteger y proteger archivos en un servidor 
remoto”, en la página 149. 

Para colocar sólo aquellos archivos cuya versión local sea más reciente que la 
versión remota, consulte “Sincronizar los archivos de los sitios locales y remotos”, 
en la página 154. 

Nota: No utilice caracteres especiales (como é, 5 o ¥) ni signos de puntuación (como dos 
puntos, guiones o puntos) en los nombres de los archivos que tiene previsto colocar en un 
servidor remoto. Muchos servidores convierten estos caracteres durante la transferencia, lo 
que rompe los vínculos con los archivos. 


Para colocar archivos en un servidor remoto: 

1 Elija Ventana > Archivos del sitio para abrir la ventana Sitio. 

2 Elija el sitio deseado en el menú de sitios de la parte superior de la ventana 
Sitio. 

3 Si utiliza FTP para transferir archivos, puede hacer clic en Conectar para abrir 
una conexión con el servidor remoto, lo que permitirá ver lo que hay en el sitio 
remoto antes de realizar la transferencia. Sin embargo, no es necesario hacer clic 
en Conectar, ya que al seleccionar la opción Colocar, Dreamweaver establece la 
conexión de forma automática. 

4 Seleccione los archivos que desea cargar. Generalmente se seleccionan en el 
panel Local, pero, si lo prefiere, puede seleccionar los archivos correspondientes 
en el panel Remoto. 

5 Haga clic en Colocar o elija Colocar en el menú contextual o el menú Sitio. 
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6 Si el archivo no se ha guardado, aparecerá un cuadro de diálogo (siempre que 
haya establecido esta opción en el panel FTP del sitio del cuadro de diálogo 
Preferencias), lo que le permitirá guardar el archivo antes de colocarlo en el 
servidor remoto. Para guardar el archivo, haga clic en Sí. Para colocar la versión 
guardada anteriormente en el servidor remoto, haga clic en No. 

Si decide no guardar el archivo, los cambios realizados no se cargarán en el 
servidor remoto. Sin embargo, si el archivo permanece abierto, podrá guardar 
los cambios después de colocar el archivo en el servidor si lo desea. 

7 Para cargar archivos dependientes, haga clic en Sí. Para omitirlos, haga clic en 
No. Si el sitio remoto ya contiene copias de los archivos dependientes, haga clic 
en No. Para evitar que vuelva a aparecer la pregunta sobre archivos 
dependientes en futuras transferencias, active la opción No volver a preguntar. 

Nota: Para detener la transferencia de archivos en cualquier momento, haga clic en el botón 
Detener tarea actual (la señal roja de "stop" con la X blanca en la esquina inferior derecha 
de la ventana Sitio) o pulse la tecla Esc (Windows) o Comando + punto (Macintosh). Es 
posible que la transferencia no se detenga inmediatamente. 

Si el archivo está abierto en una ventana de documento, puede elegir Sitio > 
Colocar en la ventana. 

Dreamweaver registra toda la actividad de transferencia de archivos FTP. Si se 
produce un error mientras transfiere un archivo con FTP, el registro de FTP del 
sitio podrá ayudarle a determinar el problema. Para mostrar el registro, elija 
Ventana > Registro FTP en la ventana Sitio (Windows) o Sitio > Registro FTP 
(Macintosh). 


Sincronizar los archivos de los sitios locales y 
remotos 

Después de crear archivos en los sitios local y remoto, puede llevar a cabo su 
sincronización entre ambos emplazamientos. Utilice el comando Sitio > 
Sincronizar para transferir las versiones más recientes de los archivos al sitio 
remoto. 

Si el sitio remoto es un servidor FTP (en lugar de un servidor de red), utilice FTP 
para sincronizar los archivos. Si desea más información sobre el uso de FTP, 
consulte “Asociar un servidor remoto a un sitio local”, en la página 140. 

Antes de sincronizar los archivos, Dreamweaver le permite verificar cuáles desea 
colocar u obtener del servidor remoto. Dreamweaver también confirma qué 
archivos se han actualizado después de finalizar la sincronización. 



Para ver qué archivos son más recientes en el sitio local o en el remoto, sin 
sincronizar, elija Edición > Seleccionar local más reciente o Edición > Seleccionar 
remoto más reciente (Windows, desde la ventana Sitio) o Sitio > Ver archivos del 
sitio > Seleccionar local más reciente o Sitio > Ver archivos del sitio > Seleccionar 
remoto más reciente (Macintosh). 

Para sincronizar los archivos: 

1 Si desea sincronizar archivos o carpetas específicas en lugar del sitio completo, 
elija los archivos o las carpetas en el panel Local o Remoto de la ventana Sitio. 

2 Elija Sitio > Sincronizar en la ventana Sitio (Windows) o desde la barra de 
menú (Macintosh). 

3 Para sincronizar el sitio completo, elija Todo el sitio ‘nombre del sitio’ en el 
menú emergente Sincronizar. Para sincronizar sólo archivos seleccionados, elija 
Archivos locales seleccionados solamente (o Archivos remotos seleccionados 
solamente si la selección más reciente la ha realizado en el panel Remoto). 

4 Elija en qué sentido quiere copiar los archivos: 

• Elija Colocar archivos más nuevos en remoto si desea cargar todos los archivos 
locales que tengan fechas de modificación más recientes que sus 
correspondientes parejas remotas. 

• Elija Obtener archivos más nuevos de remoto si desea descargar todos los 
archivos remotos que tengan fechas de modificación más recientes que sus 
correspondientes parejas locales. 

• Elija Obtener y colocar archivos más nuevos para situar las versiones más 
recientes de todos los archivos tanto en el sitio local como en el remoto. 

5 Elija si desea borrar los archivos del sitio de destino que no tengan su 
correspondiente pareja en el sitio de origen. 

Si elige Colocar archivos más nuevos en remoto y selecciona la opción Borrar, 
Dreamweaver borrará todos los archivos del sitio remoto que tengan su 
correspondiente archivo local. Si elige Obtener archivos más nuevos de remoto, 
Dreamweaver borrará todos los archivos del sitio local que tengan su 
correspondiente archivo remoto. 

6 Haga clic en Aceptar. 

Si la versión más reciente de cada archivo elegido se encuentra ya en ambos 
emplazamientos, aparecerá un mensaje advirtiendo de que no es necesario 
realizar la sincronización. 

7 En el cuadro de diálogo Sincronizar archivos, verifique qué archivos desea 
borrar, colocar y obtener. Si no desea que Dreamweaver borre, coloque u 
obtenga un determinado archivo, desactive la casilla de verificación situada a su 
izquierda (en la columna Acción). 
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8 Haga clic en Aceptar. Los archivos se transferirán automáticamente (o, en su 
caso, se borrarán) y Dreamweaver actualizará el cuadro de diálogo Sincronizar 
archivos con el estado en curso. 

9 Para guardar la información de verificación en un archivo local, haga clic en 
Guardar registro. 


Buscar y reemplazar 

Puede buscar un archivo en los sitios local y remoto desde la ventana de 
documento o la ventana Sitio. Para mostrar la ventana Sitio, elija Ventana > 
Archivos del sitio. 

También puede realizar búsquedas de texto, texto con etiquetas o etiquetas y 
atributos HTML en el documento actual, en archivos seleccionados, en un 
directorio o en todo el sitio. Observe que se utilizan comandos distintos para 
buscar archivos y para buscar texto (y/o HTML) dentro de los archivos: Localizar 
en sitio local y Localizar en sitio remoto buscan archivos, mientras que Edición > 
Buscar y Edición > Reemplazar buscan texto y etiquetas dentro de los archivos. 

Nota: Si selecciona Sitio > Localizar en sitio local o Sitio > Localizar en sitio remoto mientras 
la ventana de documento está activa y el archivo actual no forma parte del sitio abierto 
actualmente, Dreamweaver intentará determinar a cuál de los sitios definidos localmente 
pertenece el archivo actual. SI pertenece a un solo sitio local, Dreamweaver abrirá ese sitio y 
localizará el archivo dentro. 


Para buscar un archivo en el sitio local: 

1 Seleccione el archivo en el panel Remoto de la ventana Sitio o ábralo en una 
ventana de documento. 

2 Elija Sitio > Localizar en sitio local. (Sólo en Windows: si la ventana Sitio está 
activa, elija Edición > Localizar en sitio local.) 

El archivo se resalta en el panel Local de la ventana Sitio. 

Para buscar un archivo en el sitio remoto: 

1 Seleccione el archivo en el panel Local de la ventana Sitio o ábralo en una 
ventana de documento. 

2 Elija Sitio > Localizar en sitio remoto. (Sólo en Windows: si la ventana Sitio 
está activa, elija Edición > Localizar en sitio remoto.) 

El archivo se resalta en el panel Remoto de la ventana Sitio. 
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Para buscar texto y/o HTML dentro de los documentos: 

1 Dispone de las opciones siguientes: 

• En la ventana de documento o Sitio, elija Edición > Buscar o Edición > Reemplazar. 

• En el inspector de código fuente HTML, haga clic con el botón derecho del 
ratón (Windows) o mientras pulsa la tecla Control (Macintosh) y elija Buscar o 
Reemplazar en el menú contextual. 

2 En el cuadro de diálogo Buscar o Reemplazar que aparece, use la opción Buscar 
en para especiñcar los archivos en los que desea buscar: 

• Si elige Documento actual, la búsqueda se limitará al documento activo. Esta 
opción sólo está disponible cuando se elige Buscar o Reemplazar con la ventana de 
documento activa o en el menú contextual del inspector de código fuente HTML. 

• Si elige Archivos seleccionados, la búsqueda se limitará a los archivos y las 
carpetas seleccionados en la ventana Sitio. Esta opción sólo está disponible 
cuando se elige Buscar o Reemplazar con la ventana Sitio activa (es decir, 
delante de la ventana de documento). 

• Si elige Sitio actual, la búsqueda se ampliará a todos los documentos HTML, 
los archivos de biblioteca y los documentos de texto del sitio actual. Después de 
elegir Sitio actual, el nombre del sitio actual aparecerá a la derecha del menú 
emergente. Si no es éste el sitio en el que desea buscar, elija otro en el menú 
emergente de sitios actuales de la ventana Sitio. 

• Si elige Carpeta, la búsqueda se limitará a un grupo de archivos específico. 
Después de elegir Carpeta, haga clic en el icono de carpeta para localizar y 
seleccionar el directorio deseado. 

3 Utilice la opción Buscar para especificar el tipo de búsqueda que desea realizar. 

• Si elige Texto, podrá buscar cadenas de texto específicas en la ventana de 
documento. La búsqueda de texto ignora el código HTML que interrumpe la 
cadena. Por ejemplo, si busca the black dog, encontrará the black dog y the 
<¡>black</¡> dog. 

• Si elige Fuente HTML, podrá buscar cadenas de texto específicas en el código 
fuente HTML. Consulte “Búsqueda de código fuente HTML”, en la página 158. 

• Si elige Texto (avanzado), podrá buscar cadenas de texto específicas que se 
encuentran dentro o fuera de una o varias etiquetas. Por ejemplo, en un 
documento que contiene el código HTML siguiente, si busca intenta fuera de 
i, sólo encontrará la segunda aparición de la palabra intenta. Juan <¡> intenta</i> 
hacer su trabajo a tiempo, pero no siempre lo consigue. Lo intenta con energía. 
Consulte “Buscar texto entre etiquetas específicas”, en la página 160. 

• Si elige Etiqueta, podrá buscar etiquetas, atributos y valores de atributo 
específicos, como todas las etiquetas TD con VALIGN definido como TOP. 
Consulte “Buscar etiquetas y atributos HTML”, en la página 159. 
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Nota: Al pulsar Control + Entrar o Mayús + Entrar (Windows), o bien Control + Retronó, 
AAayús +Retorno o Comando + Retorno (Macintosh), se agregarán saltos de línea en los 
campos de búsqueda, lo que le permite buscar un carácter de retorno. Desactive la 
opción Ignorar diferencias de espacios en blanco cuando realice esta búsqueda si no 
utiliza expresiones regulares. Observe que este método busca un determinado carácter, 
no la idea general de un salto de línea. Por ejemplo, no busca etiquetas <br> o <p>. 
Los caracteres de retorno aparecen como espacios en la ventana de documento, no como 
saltos de línea. 

4 Utilice las opciones siguientes para ampliar o limitar la búsqueda: 

• La opción Coincidir mayúsculas y minúsculas limita la búsqueda al texto que 
coincide con el uso de mayúsculas y minúsculas del texto buscado. Por ejemplo, 
si busca aguas azules, no encontrará Aguas Azules. 

Nota: La opción Ignorar diferencias de espacios en blanco considera todos los espacios en 
blanco como un solo espacio a efectos de búsqueda. Por ejemplo, si esta opción está 
seleccionada, este texto coincidirá con este texto, pero no con estetexto. Esta opción no 
está disponible cuando está activada la opción Usar expresiones regulares; en este caso es 
necesario escribir explícitamente la expresión regular para ignorar el espacio en blanco. 
Observe que las etiquetas <p> y <br> no se consideran espacios en blanco. 

• La opción Usar expresiones regulares considera algunos caracteres y cadenas 
cortas (por ejemplo, ?, *, Yw y \b) de la cadena de búsqueda como operadores de 
expresiones regulares. Por ejemplo, si busca el perro l\w*\b puede encontrar el 
perro ladrador y el perro lanudo. Consulte “Expresiones regulares”, en la 
página 162. 


Búsqueda de código fuente HTML 

Utilice la opción Fuente HTML en el cuadro de diálogo Buscar o Reemplazar 
para buscar cadenas específicas de texto en el código fuente HTML. Por ejemplo, 
si busca perro negro en el código siguiente, encontrará dos coincidencias (en el 
atributo ALT y en la primera frase): 

<IMG SRC="barnaby.gif" WIDTH = "100" HEIGHT="100" 

ALT="Barnaby, un perro negro."><BR> 

Ayer vimos más de un perro negro en el parque. El perro 
<A HREF="barnaby.html">negro</A> que más nos gustó se llamaba Barnaby. 

El término perro negro también aparece en la segunda frase, pero no coincide con 
el texto buscado porque está cortado por un vínculo. 

Consulte “Buscar y reemplazar”, en la página 156 para obtener instrucciones 
detalladas sobre la realización de búsquedas. 
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Buscar etiquetas y atributos HTML 

Utilice la opción Etiqueta en el cuadro de diálogo Buscar o Reemplazar para 
buscar etiquetas, atributos y valores de atributos específicos. Por ejemplo, puede 
buscar todas las etiquetas IMG sin atributo ALT. Consulte “Buscar y reemplazar”, en 
la página 156 para obtener información sobre los distintos tipos de búsqueda. 


Para realizar una búsqueda de etiqueta: 

1 Elija Edición > Buscar o Edición > Reemplazar y especifique qué archivos desea 
buscar, tal como se explica en “Buscar y reemplazar”, en la página 156. 

2 Elija Etiqueta en el menú emergente Buscar. 

3 Elija una etiqueta específica en el menú que aparece al lado del menú 
emergente Buscar o elija [cualquier etiqueta]. 

Si sólo desea buscar todas las apariciones de la etiqueta especificada, pulse el 
botón menos (-) y continúe con el paso 6. En caso contrario, continúe con el 
paso 4. 

4 Limite la búsqueda con uno de los siguientes modificadores de etiqueta: 

• Seleccione Con atributo para elegir un atributo que deben encontrarse en la 
etiqueta para que ésta coincida. Puede especificar un valor determinado para el 
atributo o elegir [cualquier valor]. 

• Seleccione Sin atributo para elegir un atributo que no pueda encontrarse en la 
etiqueta para que ésta coincida. Por ejemplo, elija esta opción para buscar todas 
las etiquetas IMG sin atributo ALT. 

• Elija Contiene para especificar texto o una etiqueta que deba encontrarse 
dentro de la etiqueta original para que coincida. Por ejemplo, en el código 
<BxFONT FACE = "Ar¡al">Heading 1 </FONTx/B>, la etiqueta FONT se encuentra 
dentro de la etiqueta B. 

• Elija No contiene para especificar texto o una etiqueta que no pueda 
encontrarse dentro de la etiqueta original para que coincida. 

• Elija En etiqueta para especificar una etiqueta dentro de la cual debe 
encontrarse la etiqueta buscada para que ésta coincida. 

• Elija No está en etiqueta para especificar una etiqueta dentro de la cual pueda 
encontrarse la etiqueta buscada para que ésta coincida. 

5 Haga clic en el botón más (+) y repita el paso 4 para limitar la búsqueda. 


Administrar sitios 159 



6 Inicie la búsqueda: 

• Haga clic en Buscar siguiente para resaltar la siguiente aparición del texto 
buscado en el documento actual. 

• Haga clic en Buscar todos para generar una lista de todas las apariciones del 
texto buscado en el documento actual. 

Si realiza la búsqueda en un directorio o un sitio, Buscar siguiente resaltará la 
siguiente aparición del texto buscado en el documento actual o, si no hay 
ningún documento actual, abrirá el siguiente documento que contenga el texto 
buscado. Por su parte, Buscar todos genera una lista de documentos que 
contienen el texto buscado. 

Buscar texto entre etiquetas específicas 

Utilice la opción Texto (avanzado) en el cuadro de diálogo Buscar o Reemplazar 
para buscar cadenas específicas de texto que se encuentren dentro o fuera de una 
serie de etiquetas contenedoras. Por ejemplo, puede buscar la palabra Sin título 
entre etiquetas <title> para localizar todas las páginas sin título del sitio. Consulte 
“Buscar y reemplazar”, en la página 156 para obtener información sobre los 
distintos tipos de búsqueda. 

Para llevar a cabo una búsqueda de texto avanzada: 

1 Elija Edición > Buscar o Edición > Reemplazar y especifique qué archivos desea 
buscar, tal como se explica en “Buscar y reemplazar”, en la página 156. 

2 Elija Texto (avanzado) en el menú emergente Buscar. 

3 Introduzca el texto que desea buscar en el campo de texto situado al lado del 
menú emergente Buscar. 

Por ejemplo, escriba el término Sin título. 

4 Elija En etiqueta o No está en etiqueta y, a continuación, elija una etiqueta en el 
menú emergente que aparece al lado. 

Por ejemplo, elija En etiqueta y, seguidamente, title. 

5 Haga clic en el botón más (+) para restringir la búsqueda a etiquetas con un 
atributo o atributos específicos. 

Dado que la etiqueta <title> no tiene atributos, no necesitará emplear esta 
opción para buscar en todas las páginas sin título del sitio. 

6 Haga clic en Buscar siguiente para abrir el siguiente documento que contenga 
el texto buscado, o haga clic en Buscar todos para generar una lista de 
documentos que contengan este texto. 
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Guardar modelos de búsqueda 

Puede guardar modelos de búsqueda y utilizarlos posteriormente haciendo clic en 
el botón Guardar consulta del cuadro de diálogo Buscar o Reemplazar. Conviene 
guardar consultas si realiza periódicamente las mismas búsquedas y no desea 
generar una y otra vez el mismo modelo de búsqueda. Por ejemplo, puede guardar 
modelos para quitar etiquetas no estándar en documentos creados con otro editor 
visual HTML o para confirmar que todas las imágenes de un archivo tienen 
atributos HEIGHT, WIDTH y ALT antes de enviar el documento a la Web. 


Para guardar un modelo de búsqueda: 

1 Configure los parámetros de la búsqueda siguiendo los pasos que se describen 
en “Buscar y reemplazar”, en la página 156. 

Si realiza una búsqueda avanzada de texto o de etiquetas, consulte “Buscar 
etiquetas y atributos HTML”, en la página 159 o “Buscar texto entre etiquetas 
específicas”, en la página 160 para obtener información sobre la configuración 
de parámetros adicionales de búsqueda. 

2 Haga clic en el botón Guardar consulta (identificado con un icono de disco). 

La ubicación predeterminada para guardar las consultas es la carpeta 
Configuration/Queries, incluida dentro de la carpeta de la aplicación 
Dreamweaver. 

3 En el cuadro de diálogo que aparece, asigne un nombre de archivo que 
identifique la consulta y haga clic en Guardar. 

Por ejemplo, si el modelo de búsqueda busca etiquetas IMG sin atributo ALT, 
puede asignar el nombre img_sin_alt.dwr a la consulta. Las consultas de 
búsqueda tienen la extensión .dwq, mientras que las consultas de sustitución 
tienen la extensión .dwr. 


Para activar un modelo de búsqueda: 

1 Elija Edición > Buscar o Edición > Reemplazar. 

2 Haga clic en el botón Cargar consulta (identificado con un icono de carpeta). 

El cuadro de diálogo Cargar consulta se abrirá automáticamente en la carpeta 
Configuration/Queries. Si ha guardado las consultas en otra carpeta, puede 
acceder a ella. 

3 Seleccione un archivo de consulta y haga clic en Abrir. 

En el cuadro de diálogo Buscar sólo están disponibles las consultas de búsqueda 
(archivos .dwq). En el cuadro de diálogo Reemplazar están disponibles las 
consultas de búsqueda (archivos .dwq) y de sustitución (archivos .dwr). 

4 Haga clic en Buscar siguiente, Buscar todos, Reemplazar o Reemp. todos para 
iniciar la búsqueda. 
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Expresiones regulares 

Las expresiones regulares son modelos que describen las combinaciones de 
caracteres en el texto. Utilícelas en las búsquedas para describir conceptos como 
“frases que comiencen por ‘El’” y “valores de atributo que contengan un número”. 
La tabla siguiente contiene los caracteres especiales de las expresiones regulares, su 
significado y ejemplos de uso. 

Para buscar texto que contenga uno de los caracteres especiales de la tabla, anule el 
valor del carácter colocando una barra invertida delante de él. Por ejemplo, para 
buscar el asterisco en la frase se aplican algunas condiciones*, el modelo de búsqueda 
deberá ser el siguiente: aplican\*. Si no anula el valor del asterisco, encontrará 
todas las apariciones de “aplican” (así como de “aplica”, “aplicann” y “aplicannn”), 
no sólo las que van seguidas de asterisco. 


Carácter Texto buscado 


Ejemplo 


Principio de entrada o línea. 
Fin de entrada o línea. 


encontrará "T" en "Tierras ricas", 
pero no "La cabaña del tío Tom" 

j$ encontrará "j" en "reloj", pero no 
en "ajuar" 


El carácter anterior cero o más veces. 


¡n* encontrará "in" en "fin", "inn" en 
"innato" e "i" en "hito" 


El carácter anterior una o más veces. 


in+ encontrará "in" en "fin" e "inn" en 
"innato", pero no encontrará "hito" 


El carácter anterior una vez como 
máximo (es decir, indica que el carácter 
anterior es opcional). 


st?on encontrará "son" en "Johnson" y 
"ston" en "Johnston", pero no 
encontrará "Appleton" ni "tensión" 


Cualquier carácter individual, salvo el 
de salto de línea. 


.an encontrará "ran" y "can" en la frase 
"bran muffins can be tasty" 


x | y 


x o y. 


FF000010000FF encontrará "FF0000" en 
BGCOLOR="#FFOOOO" y "0000FF'" en 
FONT COLOR="#OOOOFF" 


{n} 


Exactamente n apariciones del carácter 
anterior. 


n{2} encontrará "nn" en "innato" y las 
dos primeras enes de "nnno", pero no 
encontrará "inane" 


{n,m} 

[abe] 


Como mínimo n y como máximo m 
apariciones del carácter anterior. 

Cualquiera de los caracteres entre 
corchetes. Especifique un rango de 
caracteres con un guión (por ejemplo, 
[a-f] es equivalente a [abedef]). 


F{2,4} encontrará "FF" en "#FF0000" y 
las cuatro primeras efes de #FFFFFF. 

[e-g] encontrará "e" en "sed", "f" en 
"folio" y "g" en "guardia" 


v abe] Cualquier carácter que no esté entre 

corchetes. Especifique un intervalo de 
caracteres con un guión (por ejemplo, 

[ ~ a-f] es equivalente a [ ^ abedef]). 


[ ^ aeiou] encontrará inicialmente "r" en 
"orangután", "b" en "biblia" y "h" en 
"aah!" 


\b 


Límite de palabra (como un espacio o 
un retorno de carro). 


\bb encontrará "b" en "biblia", pero no 
en "abajo" ni en "esnob" 
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Carácter 

Texto buscado 

Ejemplo 

\B 

Ausencia de límite de palabra. 

\Bb encontrará "b" en "abajo", pero no 
en "biblia" 

\d 

Cualquier carácter de dígito. 

Equivalente a [0-9]. 

\d encontrará "3" en "C3PO" y "2" en 
"apartamento 2G" 

\D 

Cualquier carácter que no sea de 
dígito. Equivalente a [ ^ 0-9]. 

\D encontrará "S" en "900S" y "Q" en 
"Q45" 

\f 

Salto de página. 


\n 

Salto de línea. 


V 

Retorno de carro. 


\s 

Cualquier carácter individual de espacio 
en blanco (espacios, tabulaciones, 
saltos de página o saltos de línea). 

\slibre encontrará "libre" en "Cuba 
libre", pero no en "cubalibre" 

\S 

Cualquier carácter individual que no 
sea un espacio en blanco. 

\Slibre encontrará "libre" en 
"cubalibre", pero no en "Cuba libre" 

\t 

Tabulación. 


\w 

Cualquier carácter alfanumérico, 
incluido el de subrayado. Equivalente a 
[A-Za-zO-9J. 

bb\w* encontrará "barba" en "la barba 
cana" y "blanco" y "bonito" en "el 
perro blanco es muy bonito" 

\w 

Cualquier carácter que no sea 
alfanumérico. Equivalente a 
[~A-Za-zO-9J. 

\W encontrará en "Juan & María" y 

"%" en "100%" 

Control + Entraro 
Mayús+Entrar 
(Windows), o 
Control + 

Retorno o 
Mayús+Retorno 

0 

Comando-I-Retor 
no (Macintosh) 

Carácter de retorno. Desactive la 
opción Ignorar diferencias de espacios 
en blanco cuando realice esta 
búsqueda si no utiliza expresiones 
regulares. Observe que este método 
busca un determinado carácter, no la 
idea general de un salto de línea. Por 
ejemplo, no busca etiquetas <br> o 
<p>. Los caracteres de retorno 
aparecen como espacios en la ventana 
de documento, no como saltos de 
línea. 



Use los paréntesis para destacar agrupaciones dentro de la expresión regular. 
Posteriormente podrá hacer referencia a la primera agrupación entre paréntesis, la 
segunda, la tercera y posteriores utilizando $1, $2, $3, etc. (en el campo Buscar o 
Reemplazar). Por ejemplo, si busca (\d+)\/(\d+)\/(\d+) y lo reemplaza por $2/$l/ 
$3, cambiará el día y el mes de una fecha separada por barras (para convertir el 
formato de fechas americano en formato europeo). 
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Crear sitios para múltiples exploradores 

A la hora de crear el sitio Web conviene tener en cuenta la diversidad de 
exploradores Web que pueden emplear los visitantes. En la medida de lo posible, 
diseñe el sito para ofrecer la máxima compatibilidad teniendo en cuenta otras 
limitaciones de diseño. 


Por qué y cuándo crear sitios compatibles con distintos 
exploradores 

Hay más de dos decenas de exploradores Web distintos en uso, la mayoría de los 
cuales están disponibles en varias versiones. Aunque su objetivo sea únicamente 
ofrecer compatibilidad con Netscape Navigator y Microsoft Internet Explorer, 
utilizados por la mayoría de los usuarios de la Web, no todos los visitantes 
dispondrán de las versiones más recientes de esos exploradores. Si su sitio está en la 
Web, tarde o temprano alguna persona lo visitará usando Netscape Navigator 2.0 
o el explorador que AOL facilita a sus clientes, o un explorador de sólo texto como 
Lynx. 

En algunas circunstancias no es necesario crear sitios compatibles con múltiples 
exploradores. Por ejemplo, si el sitio sólo está disponible en la intranet de la 
empresa y sabe que todos los empleados utilizan el mismo explorador, puede 
optimizar el sitio para que aproveche las características de ese explorador. Del 
mismo modo, si crea contenido HTML que se va a distribuir en un CD-ROM 
que incorpora un explorador, puede asumir que todos los clientes van a tener 
acceso a ese explorador. 

Pero en la mayoría de los casos, a la hora de diseñar sitios Web de consumo 
público es deseable que el sitio se pueda ver en tantos exploradores como sea 
posible. Seleccione uno o dos exploradores como exploradores de destino y diseñe 
el sitio para ellos, pero intente explorar el sitio con otros programas y así evitar una 
cantidad excesiva de contenido incompatible. 
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Cuestiones generales que debe tener en cuenta 

Cuanto más sofisticado sea el sitio —en términos de diseño, animación, contenido 
multimedia e interacción—, menos probable será que ofrezca compatibilidad para 
distintos exploradores. Por ejemplo, no todos los exploradores pueden ejecutar 
JavaScript. Probablemente una página de texto normal que no utilice caracteres 
especiales se verá bien en cualquier explorador, pero su atractivo estético será 
mucho menor que el de una página que haga un uso correcto de gráficos, diseño e 
interacción. Intente llegar a un equilibrio entre conseguir el máximo efecto y 
ofrecer la máxima compatibilidad. 

Un método útil consiste en proporcionar múltiples versiones de algunas páginas 
importantes, como la página principal del sitio. Por ejemplo, puede diseñar una 
versión de la página con marcos y otra sin ellos. Puede utilizar las funciones de 
algunos exploradores para llevar automáticamente a los usuarios con exploradores 
que no reconocen marcos a una versión de la página sin marcos. 


Usar comportamientos para detectar 
exploradores y plug-ins 

Puede utilizar los comportamientos para determinar qué explorador utilizan los 
visitantes y si tienen un determinado plug-in instalado. Para obtener más 
información sobre exploradores, consulte “Usar comportamientos”, en la 
página 297. 

Comprobar explorador Envía a los visitantes a distintas páginas, dependiendo de 
las marcas y versiones de sus exploradores. Por ejemplo, puede resultar 
conveniente que los visitantes vayan a una página si su explorador es Netscape 
Navigator 4.0 o una versión posterior, que vayan a otra página si tienen Microsoft 
Internet Explorer 4.0 o una versión posterior o que permanezcan en la página 
actual si usan un explorador de algún otro tipo. Consulte “Comprobar 
explorador”, en la página 309. 

Comprobar plug-in Remite a los visitantes a distintas páginas, dependiendo de si 
tienen instalado el plug-in especificado. Por ejemplo, puede resultar conveniente 
que los visitantes vayan a una página si tienen Shockwave y a otra distinta si no lo 
tienen. Consulte “Comprobar plug-in”, en la página 310. 
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Comprobación del sitio 

Antes de cargar el sitio en un servidor y dejarlo listo para visitas, conviene 
comprobarlo localmente. Es necesario asegurarse de que las páginas tienen la 
apariencia y el funcionamiento esperado en los exploradores de destino, que no 
hay vínculos rotos y que las páginas no tardan demasiado en cargarse. 

Las directrices siguientes le ayudarán a hacer más agradable la visita a sus páginas: 

• Compruebe que las páginas funcionan de la forma prevista en los exploradores 
de destino y que los fallos que experimentan en otros exploradores son 
mínimos. Las páginas deberán ser legibles y funcionales en los exploradores que 
no admiten estilos, capas ni JavaScript. Consulte “Comprobar la 
compatibilidad de una página con los exploradores de destino”, en la 
página 166. Con las páginas que funcionen muy mal en exploradores antiguos 
puede utilizar el comportamiento Comprobar explorador para remitir 
automáticamente a los visitantes a otra página. Consulte “Comprobar 
explorador”, en la página 309. 

• Compruebe si hay vínculos rotos en el sitio y repárelos. Dreamweaver genera 
una lista de vínculos a sitios externos cuando se realiza una verificación de 
vínculos. Siga periódicamente estos vínculos para comprobar que siguen siendo 
válidos. Otros sitios experimentan cambios de diseño y organización, por lo 
que es posible que se hayan movido o borrado las páginas con las que tiene 
establecidos vínculos. Consulte “Comprobar vínculos entre documentos”, en la 
página 168 y “Reparar vínculos rotos”, en la página 169. 

• Realice una vista previa de las páginas en todos los exploradores y plataformas 
posibles. De este modo podrá observar las diferencias en diseño, color, tamaño 
de fuentes y tamaño predeterminado de ventana del explorador, diferencias que 
no se pueden ver comprobando el explorador de destino. Consulte “Vista 
previa en exploradores”, en la página 170. 

• Procure que el tamaño de las páginas y el tiempo que tardan en descargarse no 
sean excesivos. Si la página consiste únicamente en una tabla grande, el visitante 
no verá nada hasta que termine de cargarse toda la tabla. Puede resultar 
conveniente dividir las tablas grandes. Si no es posible, puede colocar algo de 
contenido, como un mensaje de bienvenida o un rótulo publicitario, fuera de la 
tabla, en la parte superior de la página, de modo que los usuarios puedan verlo 
mientras se descarga la tabla. Consulte “Comprobar el tiempo y el tamaño de 
descarga”, en la página 171. 


Comprobar la compatibilidad de una página con los exploradores 
de destino 

Dreamweaver permite crear páginas Web con elementos que admiten todos los 
exploradores (por ejemplo, imágenes y texto de párrafo), así como con elementos 
que sólo admiten los exploradores más recientes (por ejemplo, estilos y capas). 
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La función Comprobar exploradores de destino analiza el HTML de los 
documentos para ver si hay etiquetas o atributos que no admiten los exploradores 
de destino. La comprobación no altera el documento. 

La función Comprobar exploradores de destino utiliza archivos de texto 
denominados perfiles de explorador para determinar qué etiquetas admiten los 
exploradores específicos. Dreamweaver incluye perfiles predefinidos para las 
versiones 2.0, 3.0 y 4.0 de Netscape Navigator y las versiones 2.0, 3.0, 4.0 y 5.0 de 
Internet Explorer. Para modificar los perfiles existentes o crear otros nuevos, 
consulte “Perfiles de exploradores”, en la página 399. 

Puede ejecutar una comprobación del explorador de destino con un documento, 
un directorio o todo el sitio. En esta comprobación no se verifican las secuencias 
de comandos del sitio. 

Para ejecutar una comprobación del explorador de destino: 

1 Dispone de las opciones siguientes: 

• Para ejecutar la comprobación en el documento actual, guarde el archivo. La 
comprobación se realizará con la última versión guardada del archivo y no 
incluirá los cambios que no haya guardado. 

• Para ejecutar la comprobación con un directorio o un sitio, elija Ventana > 
Archivos del sitio y abra la ventana FTP del sitio. A continuación, seleccione 
una carpeta en el directorio local. La comprobación del explorador de destino 
se realizará en todos los archivos HTML de esa carpeta y las subcarpetas que 
contenga. La comprobación del explorador de destino sólo se puede llevar a 
cabo con archivos locales. 

2 Elija Archivo > Comprobar exploradores de destino. 

Si aún no ha seleccionado un Explorador principal, el programa le pedirá que lo 
haga. 

3 En la lista de exploradores, seleccione el explorador o exploradores que desea 
utilizar para la comprobación. 

4 Haga clic en Comprobar. 

Se abrirá el informe del explorador de destino en el explorador principal (que se 
iniciará si aún no está abierto). 

5 Para guardar el informe, elija Archivo > Guardar en el explorador. 

El informe de comprobación del explorador de destino es un archivo temporal 
que se almacena en la carpeta Temp en Windows y en la raíz de documentos en 
Macintosh. El archivo se perderá si no lo guarda antes de explorar otro sitio. 


Administrar sitios 167 



Comprobar vínculos entre documentos 

Utilice la función Comprobar vínculos para buscar vínculos rotos y archivos sin 
referencia en archivos abiertos, partes de un sitio local o sitios locales completos. 
Los únicos vínculos que Dreamweaver verifica son los establecidos con 
documentos del sitio. Asimismo, recopila una lista de vínculos externos que 
aparecen en el documento o documentos seleccionados, pero no los verifica. 

Cuando Dreamweaver termina de comprobar los vínculos de los archivos 
especificados, abre el cuadro de diálogo Verificador de vínculos. Este cuadro de 
diálogo muestra una lista de los vínculos rotos, los vínculos externos (vínculos que 
Dreamweaver no puede comprobar porque están fuera del sitio) y los archivos 
huérfanos (archivos a los que no están vinculados otros documentos). Consulte 
“Reparar vínculos rotos”, en la página 169 para obtener más información. 

Para comprobar los vínculos del documento actual: 

1 Guarde el archivo en una ubicación dentro de un sitio local. 

2 Elija Archivo > Comprobar vínculos. 

Para comprobar los vínculos de una parte de un sitio local: 

1 Elija Ventana > Archivos del sitio para abrir la ventana Sitio. 

2 Elija un sitio en la lista del menú emergente Sitios. 

3 En el panel Local, seleccione los archivos o las carpetas que desea comprobar. 

4 Inicie la comprobación mediante uno de estos métodos: 

• Haga clic con el botón izquierdo del ratón (Windows) o mientras pulsa la tecla 
Control (Macintosh) en uno de los archivo seleccionados y elija Comprobar 
vínculos > Archivos/carpetas seleccionados en el menú contextual. 

• Elija Archivo > Comprobar vínculos. 

Para comprobar los vínculos de todo el sitio: 

Elija Sitio > Comprobar vínculos en todo el sitio. 

Para alternar entre listas del informe del verificador de vínculos: 

Después de ejecutar una comprobación de vínculos, elija Vínculos rotos, Vínculos 
externos o Archivos huérfanos en el menú emergente Mostrar. 

Para guardar todo el informe como archivo de texto delimitado por tabulaciones. 

Haga clic en Guardar. 
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Reparar vínculos rotos 

Al comprobar vínculos en Dreamweaver aparece el cuadro de diálogo Verificador 
de vínculos con un informe de vínculos rotos, vínculos externos y —si ha 
comprobado todo el sitio— archivos huérfanos. 

Puede reparar las referencias de imagen y los vínculos rotos directamente en el 
cuadro de diálogo Verificador de vínculos, o abrir los archivos desde la lista y 
reparar los vínculos en el inspector de propiedades. 


Para reparar los vínculos en el cuadro de diálogo Verificador de vínculos: 

1 Seleccione el vínculo roto en el cuadro de diálogo Verificador de vínculos. 

2 Haga clic en el icono de carpeta para localizar el archivo con el que desea 
establecer el vínculo o escriba su ruta y nombre. 

3 Pulse la tecla Tabulación o Entrar. 

Si hay otras referencias rotas a este mismo archivo, aparecerá un cuadro de 
diálogo pidiéndole que repare las referencias en los otros archivos. Haga clic en 
Sí para actualizar todos los documentos de la lista que hacen referencia a este 
archivo. Haga clic en No si desea actualizar únicamente la referencia actual. 

Nota: Si está activada la función de desprotección/protección de archivos para este sitio, 
Dreamweaver intentará proteger los archivos que requieren cambio. Si no puede 
desproteger un archivo, Dreamweaver mostrará un cuadro de diálogo de advertencia y no 
cambiará las referencias rotas. Consulte "Usar el sistema de desprotección/protección", en la 
página 148. 


Para reparar vínculos en el inspector de propiedades: 

1 En el cuadro de diálogo Verificador de vínculos, haga doble clic en una entrada 
de la columna Archivo. 

Dreamweaver abrirá el documento, seleccionará la imagen o el vínculo 
problemáticos y resaltará la ruta y el nombre de archivo en el inspector de 
propiedades. (Si el inspector de propiedades no está visible, elija Ventana > 
Propiedades para abrirlo). 

2 Si desea establecer una ruta y un nombre de archivo nuevos, haga clic en el 
icono de carpeta para localizar el archivo correspondiente y sobrescriba el texto 
resaltado. 

Si está actualizando una referencia de imagen y la nueva imagen aparece con el 
tamaño incorrecto, haga clic en la etiquetas An y Al del inspector de 
propiedades o en el botón Actualizar para restablecer los valores de altura y 
anchura. Las etiquetas An y Al cambiarán de negrita a tipo normal. 

3 Guarde el archivo. 
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A medida que los vínculos se van reparando, sus entradas desaparecen de la lista 
Vínculos rotos. Si una entrada aparece en la lista después de introducir una ruta o 
un nombre de archivo nuevos en el Verificador de vínculos (o después de guardar 
los cambios realizados en el inspector de propiedades), significa que Dreamweaver 
no encuentra el archivo nuevo. Se sigue considerando que el vínculo está roto. 


Vista previa en exploradores 

Puede realizar una vista previa de los documentos en los exploradores de destino 
en cualquier momento. No es necesario que guarde el documento previamente. 
Podrá activar todas las funciones relacionadas con el explorador, como los 
comportamientos JavaScript, los vínculos absolutos y relativos al documento, los 
controles ActiveX, los plug-ins de Netscape, etc., siempre que haya instalado los 
plug-ins o los controles ActiveX necesarios. 

El contenido vinculado a rutas relativas a la raíz no aparece cuando se realiza una 
vista previa de documentos en un explorador local. Esto se debe a que los 
exploradores no reconocen raíces de sitios, mientras que los servidores sí. Para 
realizar una vista de previa de contenido vinculado a rutas relativas a la raíz, sitúe 
el archivo en un servidor remoto y véalo desde él. Consulte también “Rutas 
absolutas”, en la página 110. 

Puede definir hasta 20 exploradores para realizar vistas previas. Todos los 
exploradores que defina aparecerán en el menú Vista previa en el explorador. 


Para obtener una vista previa del documento en un explorador: 

Lleve a cabo una de estas operaciones: 

• Elija Archivo > Vista previa en el explorador. 

• Pulse F12 para mostrar el documento actual en el explorador principal. 

• Pulse Control+F12 (Windows) o Comando+F12 (Macintosh) para mostrar el 
documento actual en el explorador secundario. 

Para cambiar el explorador principal o definir un explorador secundario: 

1 Elija Archivo > Vista previa en el explorador > Editar lista de exploradores. 

2 Establezca las preferencias de vista previa que desee. 
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Configurar preferencias de vista previa en el explorador 

Las preferencias de Vista previa en el explorador muestran los exploradores 
principal y secundario definidos actualmente. Para abrir las preferencias de Vista 
previa en el explorador, elija Edición > Preferencias y seleccione Vista previa en el 
explorador o bien elija Archivo > Vista previa en el explorador > Editar lista de 
exploradores. 

Vista previa usando el servidor local Permite elegir un servidor local para realizar la 
vista previa de una página en un explorador (sólo Windows). Para que esta opción 
funcione es necesario ejecutar software de servidor en el ordenador local. Cuando 
esta opción está activada, Dreamweaver suministra la página actual para realizar la 
vista previa en un servidor local como un URL que comienza por http://localhost/. 
Cuando esta opción está desactivada, Dreamweaver abre el documento en un 
explorador con una ruta de archivo que comienza por archivo://. En algunos casos, 
los vínculos especificados como rutas relativas a la raíz del sitio no funcionan 
correctamente cuando se abren en un explorador con una ruta archivo://. 

+Agrega un explorador a la lista. 

-Elimina el explorador seleccionado en la lista. 

Editar Cambia la configuración del explorador seleccionado. 

Explorador principal y Explorador secundario Especifican si el explorador 
seleccionado es el principal o el secundario. F12 abre el explorador principal. Pulse 
Control+F12 (Windows) o Comando+F12 (Macintosh) para abrir el explorador 
secundario. 

Comprobar el tiempo y el tamaño de descarga 

En la parte inferior de la ventana de documento figuran el tamaño y el tiempo 
estimado de descarga de la página actual. Dreamweaver calcula el tamaño 
basándose en todo el contenido de la página, incluidos los objetos vinculados, 
como imágenes y plug-ins. 

Dreamweaver estima el tiempo de descarga basándose en la velocidad de conexión 
introducida en el panel de la barra de estado del cuadro de diálogo Preferencias. El 
tiempo de descarga real dependerá de las condiciones generales de Internet. 

Para establecer las preferencias de tiempo y tamaño de descarga: 

1 Elija Edición > Preferencias y, a continuación, haga clic en la barra de estado. 

2 Elija una velocidad de conexión para calcular el tiempo de descarga. 

La velocidad media de conexión en Estados Unidos es 28,8. Si el diseño se 
realiza para una intranet, puede seleccionar 1.500 (velocidad TI). 
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Design Notes 

Utilice el comando Design Notes para mantener información adicional asociada a 
los documentos, como nombres de los archivos de imagen y comentarios sobre el 
estado del archivo. 

Por ejemplo, si copia un documento de un sitio a otro, puede agregar Design Notes 
sobre ese documento, con el comentario de que el documento original se encuentra en 
la carpeta del otro sitio. Posteriormente, si actualiza ese documento (o si lo hace otro 
usuario), sabrá que también tiene que actualizar la página original. 

También puede emplear Design Notes para realizar un seguimiento de la información 
sensible que no puede introducir en un documento por motivos de seguridad. Por 
ejemplo, puede incluir información sobre cómo se creó el documento, cómo se calculó 
un determinado precio o se estableció una configuración o qué factores de marketing 
han intervenido en una decisión de diseño. 


Guardar información sobre archivos en Design Notes 

Puede crear un archivo Design Notes para cada documento o plantilla del sitio. 
Observe que si agrega Design Notes a una plantilla, los documentos basados en 
dicha plantilla no heredarán las Design Notes. También puede crear Design Notes 
para applets, controles ActiveX, imágenes, películas Flash, objetos Shockwave y 
campos de imagen en sus documentos. 

Para configurar Design Notes para el sitio: 

1 Elija Sitio > Definir sitios, seleccione un sitio y haga clic en Editar. 

2 En la lista Categoría de la izquierda, haga clic en Design Notes. 

• Active Design Notes para el sitio seleccionando la opción Mantener Design 
Notes (si no está seleccionada). 

Cuando está activada la opción Mantener Design Notes, puede crear Design 
Notes para los archivos del sitio. Cada vez que copie, mueva, cambie de nombre o 
borre un archivo, el archivo asociado Design Notes realizará la misma operación. 

• Elija si desea que las Design Notes asociadas al sitio se carguen con el resto de los 
documentos. Para ello, active o desactive Cargar Design Notes para compartir. 

Cuando está activada la opción Cargar Design Notes para compartir, puede 
compartir Design Notes con el resto del equipo de colaboradores. Cuando 
coloca u obtiene un archivo, Dreamweaver coloca u obtiene automáticamente 
el archivo Design Notes asociado. Si usted trabaja en solitario, puede desactivar 
esta opción para mejorar el rendimiento en la transferencia de archivos. 
Cuando la opción está desactivada, las Design Notes se mantienen localmente, 
pero no se cargan con los archivos. 

3 Haga clic en Aceptar. 
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Para agregar Design Notes a un documento: 

1 Mientras el documento se encuentra activo en la ventana de documento, elija 
Archivo > Design Notes. 

También puede seleccionar el archivo en la ventana Sitio y, a continuación, 
elegir Archivo > Design Notes. Si el archivo reside en un sitio remoto, en 
primer lugar deberá protegerlo u obtenerlo y, a continuación, seleccionarlo en 
la carpeta local. Consulte “Desproteger y proteger archivos en un servidor 
remoto”, en la página 149 o “Obtener y colocar archivos”, en la página 151. 

2 En la ficha Información básica, agregue notas de varios tipos: 

• Elija el estado del documento en el menú emergente Estado. 

• Escriba comentarios en el campo de texto Notas. 

• Haga clic en el icono de fecha (justo por encima del campo de texto Notas) 
para insertar la fecha local actual. 

• Para hacer que el archivo Design Notes aparezca cada vez que se abre el archivo, 
seleccione Mostrar al abrir el archivo. 

3 En la ficha Toda la información, agregue otras claves y valores que puedan 
resultar útiles para otros desarrolladores del sitio. Por ejemplo, puede asignar el 
nombre Autor (en el campo Nombre) a una clave y definir el valor como Heidi 
(en el campo Valor). Haga clic en el botón más (+) para agregar un nuevo par 
clave/valor; seleccione un par y haga clic en el botón menos (-) para quitarlo. 

4 Haga clic en Aceptar para guardar las notas. 

Las notas que introduzca se guardarán en una subcarpeta llamada _notes en la 
misma ubicación que el archivo actual. El nombre de archivo será el nombre 
del documento más la extensión .mno. Por ejemplo, si el nombre de archivo es 
index.html, el archivo Design Notes asociado se llamará index.html. mno. 

Para agregar Design Notes a un objeto: 

1 Elija Design Notes en el menú contextual del objeto. Abra el menú contextual 
del objeto haciendo clic con el botón izquierdo del ratón (Windows) o 
haciendo clic mientras pulsa la tecla Control (Macintosh) en el objeto. 

2 Siga los pasos 2 a 4 para agregar Design Notes a un documento. 

Observe que el archivo Design Notes de un objeto se guarda en la subcarpeta 
_notes, dentro del mismo directorio que el archivo de origen del objeto, que no 
se encuentra necesariamente en el mismo directorio que el documento donde 
aparece el objeto. 
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Para asignar un estado que no figure en el menú emergente Estado: 

1 Abra Design Notes para un archivo u objeto. 

2 Haga clic en la ficha Toda la información. 

3 Haga clic en el botón más (+). 

4 En el campo Nombre, escriba la palabra estado. 

5 En el campo Valor, introduzca el estado. 

Si ya existe un valor de estado, será sustituido por el nuevo. 

6 Haga clic en la ficha Información básica y observe que el nuevo valor de estado 
aparece en el menú emergente Estado. 

Nota: Sólo puede tener simultáneamente un valor nuevo en el menú de estado. Si sigue 
este procedimiento otra vez, el nuevo valor de estado que introdujo la primera vez será 
sustituido por el valor que introduzca la segunda vez. 

Para desactivar Design Notes: 

1 Elija Sitio Definir sitios. 

2 En el cuadro de diálogo Definir sitios, seleccione el sitio y haga clic en Editar. 

3 En el cuadro de diálogo Definición de sitio, haga clic en Design Notes. 

4 Desactive Mantener Design Notes. 

Al desactivar esta opción se desactivará la función Design Notes. Si desactiva 
esta opción y, a continuación, hace clic en Limpiar, se borrarán todos los 
archivos Design Notes del sitio. 

5 Haga clic en Aceptar. 

Aparecerá un cuadro de diálogo en el que se le preguntará si desea borrar los 
archivos Design Notes existentes. Haga clic en Sí para borrar los archivos o en 
No para dejarlos en su sitio. 

Para utilizar Design Notes a nivel local únicamente: 

1 Elija Sitk» Definir sitios. 

2 En el cuadro de diálogo Definir sitios, seleccione el sitio y haga clic en Editar. 

3 En el cuadro de diálogo Definición de sitio, haga clic en Design Notes. 

4 Desactive Cargar para compartir. 

Las Design Notes no se transferirán al sitio remoto cuando despro teja/coloque 
los archivos. Podrá seguir agregando y modificando las Design Notes del sitio a 
nivel local. 
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Para borrar del sitio las Design Notes no asociadas: 

1 Elija Sitio Definir sitios. 

2 En el cuadro de diálogo Definir sitios, seleccione el sitio y haga clic en Editar. 

3 En el cuadro de diálogo Definición de sitio, haga clic en Design Notes. 

4 Haga clic en Limpiar. Dreamweaver le pedirá que confirme que desea borrar las 
Design Notes que ya no están asociadas a un archivo del sitio. Si utiliza 
Dreamweaver para borrar un archivo que tiene una archivo Design Notes 
asociado, también se borrará el archivo Design Notes. Por tanto, sólo pueden 
producirse archivos Design Notes huérfanos si borra o cambia el nombre de un 
archivo fuera de Dreamweaver. 

Nota: Si desactiva la opción Mantener Design Notes antes de hacer clic en Limpiar, 
Dreamweaver borrará todos los archivos Design Notes del sitio. 


Usar Design Notes en Fireworks y Dreamweaver 

Si abre un gráfico en Macromedia Fireworks 3.0 y lo exporta a otro formato, 
Fireworks guardará automáticamente el nombre del archivo original en un archivo 
Design Notes. Por ejemplo, si abre myhouse.png en Fireworks y lo exporta como 
myhouse.gif, Fireworks creará automáticamente un archivo Design Notes llamado 
myhouse.gif.mno, que contendrá el nombre del archivo original como un archivo 
absoluto: URL. Por ejemplo, las Design Notes para myhouse.gif might contienen 
esta línea: 

fw_source= ,l f¡le:///Mydisk/s¡tes/assets/or¡g/myhouse.png 11 

Si la imagen contiene zonas interactivas o imágenes de sustitución, la fuente 
HTML de esos elementos también se agregará al archivo Design Notes. 

Cuando importa el gráfico en Dreamweaver, el archivo Design Notes se copia 
automáticamente en el sitio junto con el gráfico. Al seleccionar la imagen en 
Dreamweaver y editarlo usando Fireworks (consulte “Usar un editor de imágenes 
externo”, en la página 205), Fireworks abrirá el archivo original para editarlo. 
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CAPÍTULO e 

Aplicar formato al texto 


Las opciones de formato de Dreamweaver son similares a las de los programas 
estándar de tratamiento de texto. Utilice el submenú Texto > Formato o el menú 
emergente Formato del inspector de propiedades para establecer el estilo 
predeterminado (Párrafo, Preformateado, Encabezado 1, Encabezado 2, etc.) de 
un bloque de texto. Para cambiar la fuente, el tamaño, el color y la alineación del 
texto seleccionado, use el menú Texto o el inspector de propiedades. Para aplicar 
formato como negrita, cursiva, código, subrayado, etc., utilice el submenú Texto > 
Estilos. 

También puede combinar varias etiquetas HTML estándar para formar un estilo, 
denominado estilo HTML. Por ejemplo, puede aplicar formato HTML 
manualmente utilizando una combinación de etiquetas y, a continuación, guardar 
ese formato como un estilo HTML que se almacenará en la paleta de estilos 
HTML. La próxima vez que quiera formatear texto utilizando esa combinación de 
etiquetas HTML, lo único que tendrá hacer será seleccionar el estilo guardado en 
la paleta de estilos HTML. Los estilos HTML son compatibles con todos los 
exploradores Web y permiten un ahorro de tiempo considerable en comparación 
con la aplicación manual de formato de texto. 

Otro tipo de estilo, denominado CSS, permite aplicar formato a texto y páginas, 
con la ventaja de que se actualiza de manera automática. Puede almacenar estilos 
CSS directamente en el documento o, si desea tener mayor control y flexibilidad, 
en una hoja de estilos externa. Si adjunta una hoja de estilos externa a varias 
páginas Web, todas las páginas reflejarán automáticamente los cambios realizados 
en la hoja. Para acceder a estilos CSS, use la paleta de estilos CSS. 
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La aplicación manual de formato HTML y los estilos HTML utilizan etiquetas 
HTML estándar (como B, PONT y CODE) que reconocen los exploradores Web más 
utilizados. Los estilos CSS definen el formato del texto de una determinada clase o 
redefinen el formato de una etiqueta específica (como H1, H2, P o Ll). Los estilos 
CSS (hojas de estilos en cascada) sólo son compatibles con los exploradores Web 
más recientes, como Netscape Navigator 4.0 y Microsoft Internet Explorer 3.0 o 
versiones posteriores. 

Puede utilizar estilos CSS, estilos HTML y opciones de formato manuales HTML 
en la misma página. El formato manual HTML prevale sobre el formato aplicado 
por un estilo HTML o CSS. Por tanto, aunque resulte un poco más laborioso, 
puede resultar un método conveniente para modificar formato aplicado por estilos 
HTML o CSS. 


Aplicar formato al texto usando etiquetas 
HTML 

Puede aplicar formato de texto HTML a una letra o crear un sitio completo 
utilizando los comandos de Texto > Formato o las opciones del inspector de 
propiedades. Este tipo de formato manual prevale sobre el establecido por un 
estilo HTML o CSS. 

Al aplicar formato de texto HTML se utiliza el inspector de propiedades y los 
comandos del menú Texto, como Texto > Formato y Texto > Estilo. 


Aplicar etiquetas de párrafo y encabezado 

Utilice el menú Formato del inspector de propiedades o el submenú Texto > 

Formato para aplicar las etiquetas estándar de párrafo y encabezado. Para redefinir 

la apariencia de las etiquetas de párrafo y encabezado utilice hojas de estilos CSS 

(consulte “Aplicar formato al texto con hojas de estilos CSS”, en la página 188). 

Para aplicar una etiqueta de párrafo o encabezado: 

1 Sitúe el punto de inserción en el párrafo o seleccione parte del texto del 
párrafo. 

2 En el submenú Texto > Formato o el menú emergente Formato del inspector de 
propiedades, elija una opción: 

• Elija un formato de párrafo (por ejemplo, Encabezado 1, Encabezado 2, 
Preformateado, etc.). La etiqueta HTML asociada con el estilo seleccionado 
(por ejemplo, H1 para Encabezado 1, H2 para Encabezado 2, PRE para 
Preformateado, etc.) se aplicará a todo el párrafo. 

• Elija Ninguno para quitar un formato de párrafo. 
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Cambiar características de fuente 


Utilice el inspector de propiedades o el menú Texto para cambiar las características 

de fuente del texto seleccionado. 

Para cambiar las características de fuente: 

1 Seleccione el texto. Si no hay texto seleccionado, el cambio se aplicará al texto 
que escriba a continuación. 

2 Dispone de las opciones siguientes: 

• Para cambiar la fuente, elija una combinación de fuentes en el inspector de 
propiedades o en el submenú Texto > Fuente. 

Los exploradores muestran el texto utilizando la primera fuente de la 
combinación que esté instalada en el sistema del usuario. Si ninguna de las 
fuentes de la combinación está instalada, el explorador mostrará el texto de 
acuerdo con su propia configuración. Consulte también “Modificar 
combinaciones de fuentes”, en la página 180. Elija Predeterminada para quitar 
los tipos de fuente aplicados anteriormente y aplicar la fuente predeterminada 
al texto seleccionado (la fuente predeterminada del explorador o la fuente 
asignada a la etiqueta en la hoja de estilos CSS). 

• Para cambiar el estilo de fuente, haga clic en Negrita o Cursiva en el inspector 
de propiedades o elija un estilo de fuente (Negrita, Cursiva, Subrayado, etc.) 
en el 

submenú Texto > Estilo. 

• Para cambiar el tamaño de fuente, elija un tamaño (de 1 a 7) en el inspector de 
propiedades o en el submenú Texto > Tamaño. 

Los tamaños de fuente HTML son tamaños relativos, no de puntos. Los 
usuarios establecen el tamaño de puntos de la fuente predeterminada para sus 
exploradores. Éste será el tamaño de fuente que verán cuando elijan 
Predeterminado o 3 en el inspector de propiedades o el submenú Texto > 
Tamaño. Los tamaños 1 o 2 aparecerán más pequeños que el tamaño de fuente 
predeterminado; los tamaños 4 a 7 aparecerán más grandes. Para hacer que el 
texto aparezca constantemente en un tamaño de punto específico, utilice hojas 
de estilos CSS. 

• Para aumentar o reducir el tamaño del texto seleccionado, elija un tamaño 
relativo (desde + o -1 hasta + o -7) en el inspector de propiedades o en el menú 
Texto > Aumentar tamaño o Reducir tamaño. 

Los números indican una diferencia relativa respecto al tamaño de BASEFONT. El 
valor predeterminado de BASEFONT es 3. De este modo, un valor de +4 produce 
un tamaño de fuente de 7. Dreamweaver no muestra la etiqueta BASEFONT 
(incluida en la sección HEAD), aunque el tamaño de fuente aparecerá 
correctamente en el explorador. 
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Modificar combinaciones de fuentes 


Utilice el comando Editar lista de fuentes para establecer las combinaciones de 
fuentes que aparecen en el inspector de propiedades y el submenú Texto > Fuente. 

Las combinaciones de fuentes determinan cómo muestra un explorador el texto de 
la página Web. Un explorador utiliza la primera fuente de la combinación que se 
encuentre en el sistema del usuario; si no está instalada ninguna de las fuentes de 
la combinación, el explorador mostrará el texto de acuerdo con las preferencias 
que tenga definidas. 

Para modificar las combinaciones de fuentes: 

1 Elija Texto > Fuente > Editar lista de fuentes. 

2 Seleccione la combinación de fuentes en la lista de la parte superior del cuadro 
de diálogo. 

Las fuentes de la combinación seleccionada aparecerán en la lista Fuentes 
elegidas, situada en la esquina inferior izquierda del cuadro de diálogo. A la 
derecha de ésta se encuentra una lista con todas las fuentes instaladas en el 
sistema. 

3 Dispone de las opciones siguientes: 

• Para agregar o quitar fuentes de una combinación, haga clic en el botón << o >> 
entre las listas Fuentes elegidas y Fuentes disponibles. 

• Para agregar o quitar una combinación de fuentes, haga clic, respectivamente, 
en los botones más (+) y menos (-) de la parte superior del cuadro de diálogo. 

• Para agregar una fuente que no está instalada en el sistema, escriba el nombre de 
la fuente en cuadro de texto situado bajo la lista Fuentes disponibles y haga clic 
en el botón<< para agregarla a la combinación. Agregar una fuente que no está 
instalada en el sistema resulta útil, por ejemplo, para especificar una fuente sólo 
para Windows cuando se trabaja con Macintosh. 

• Para desplazarse por la lista de combinaciones de fuentes, haga clic en los 
botones de flecha de la parte superior del cuadro de diálogo. 
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Para agregar una nueva combinación a la lista de fuentes: 

1 Elija Texto > Fuente > Editar lista de fuentes. 

2 Seleccione una fuente de la lista de Fuentes disponibles y haga clic en el botón 
« para agregar la fuente a la lista de Fuentes elegidas. 

3 Repita el paso 2 con cada fuente de la combinación. 

Para agregar una fuente que no está instalada en el sistema, escriba el nombre de 
la fuente en el campo de texto situado bajo la lista Fuentes disponibles y haga 
clic en el « botón para agregarla a la combinación. Agregar una fuente que no 
está instalada en el sistema resulta útil, por ejemplo, para especificar una fuente 
sólo para Windows cuando se trabaja con Macintosh. 

4 Cuando termine de seleccionar fuentes específicas, seleccione una familia 
genérica de fuentes en el menú Fuentes disponibles y haga clic en el botón « 
para pasar la familia genérica de fuentes a la lista Fuentes elegidas. 

Las familias genéricas de fuentes son: cursiva, fantasía, monoespacio, sans-serif 
y serif. Si ninguna de las fuentes de la lista Fuentes elegidas está disponible en el 
sistema del usuario, el texto aparecerá en la fuente predeterminada asociada con 
la familia genérica de fuentes. Por ejemplo, la fuente monoespacio 
predeterminada en la mayoría de los sistemas es Courier. 


Cambiar el color del texto 

Puede cambiar el color del texto seleccionado de modo que el nuevo color 

prevalezca sobre el color establecido en Propiedades de la página. Si no se ha 

establecido ningún color de texto en Propiedades de la página, se utilizará el negro 

como color predeterminado. 

Para cambiar el color del texto: 

1 Seleccione el texto. 

2 Dispone de las opciones siguientes: 

• Elija un color en la paleta de colores válidos para los exploradores haciendo clic 
en el cuadro de color del inspector de propiedades. 

• Elija Texto > Color. Aparecerá el cuadro de diálogo Selector de colores del 
sistema. Seleccione un color y haga clic en Aceptar. 

• Para definir el color predeterminado del texto, utilice el comando Modificar > 
Propiedades de la página. Consulte “Definir colores predeterminados de texto”, 
en la página 96. 
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Para restablecer el color predeterminado del texto: 

1 En el inspector de propiedades, haga clic en el cuadro de color para abrir la 
paleta de colores válidos para los exploradores. 

2 Haga clic en el botón Borrar (el botón central en la esquina inferior derecha). 

Alinear texto y elementos 

Puede alinear texto en la página utilizando el inspector de propiedades o el 
submenú Texto > Alineación. Asimismo, puede centrar cualquier elemento en una 
página usando el comando Texto > Alineación > Centro. 

Para alinear texto: 

1 Seleccione el texto que desea alinear. 

2 Haga clic en una opción de alineación (Izquierda, Derecha o Centro) del 
inspector de propiedades o elija Texto > Alineación y seleccione un comando. 

Para centrar elementos: 

1 Seleccione el elemento que desea centrar (imagen, plug-in, tabla u otro 
elemento de página). 

2 Elija Texto > Alineación > Centro. 

Nota: Se pueden alinear y centrar bloques completos de texto, pero no partes de un 
encabezado o de un párrafo. 


Para aplicar y quitar sangría de texto: 

1 Seleccione el texto deseado. 

2 Haga clic en el botón Sangría o Anular sangría del inspector de propiedades, 
elija Texto > Sangría o Anular sangría, o elija Lista > Sangría o Anular sangría 
en el menú contextual. 

De este modo se aplicará o eliminará la etiqueta BLOCKQUOTE cuando el texto 
seleccionado sea un párrafo o un encabezado, y se agregará o quitará una 
etiqueta adicional UL o OL cuando el texto seleccionado sea una lista. 
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Crear listas 


Puede crear listas numeradas, listas con viñetas y listas de definición a partir de 

texto existente o de texto nuevo que escriba en la ventana de documento. Además, 

las listas se pueden anidar. 

Para crear una lista: 

1 Sitúe el punto de inserción en la línea donde desea agregar una lista de 
elementos nuevos. 

2 Haga clic en los botones Lista con viñetas o Lista numerada del inspector de 
propiedades o elija Texto > Lista y seleccione el tipo de lista deseado: Lista sin 
ordenar (con viñetas), Lista ordenada (numerada) o Lista de definición. 

3 Comience a escribir la lista, pulsando Entrar (Windows) o Retorno 
(Macintosh) para pasar a otro elemento de la lista. 

4 Para terminar la lista, pulse dos veces Entrar (Windows) o Retorno 
(Macintosh). 

Para crear una lista usando texto existente: 

1 Seleccione una serie de párrafos para convertirlos en una lista. 

2 Haga clic en los botones Lista con viñetas o Lista numerada del inspector de 
propiedades o elija Texto > Lista y seleccione el tipo de lista deseado: Lista sin 
ordenar (con viñetas), Lista ordenada (numerada) o Lista de definición. 

Para crear una lista anidada: 

1 Seleccione los elementos de lista que desea anidar. 

2 Haga clic en el botón Sangría del inspector de propiedades o elija Texto > 
Sangría. 
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Aplicar formato al texto usando estilos HTML 

Un estilo HTML se define mediante una o más etiquetas HTML (como B, I, FONT 
y CENTER) que aplican formato al texto. La especificación HTML 4.0 emitida por 
el World Wide Web Consortium (W3C) a principios de 1998 desalentaba el uso 
de etiquetas de formato HTML en favor de las hojas de estilos CSS. Sin embargo, 
en la práctica, las etiquetas de formato HTML, a pesar de que ofrecen un control 
más limitado sobre la apariencia que las hojas de estilos CSS, son compatibles con 
una gama más amplia de exploradores que las hojas de estilos CSS. Por esta razón, 
es probable que sigan formando parte de las herramientas de los desarrolladores 
Web mientras los exploradores 3.0 y anteriores constituyan un porcentaje 
considerable del tráfico de la Web. 

Para obtener información específica sobre la aplicación de formato con etiquetas 
HTML, consulte uno de los temas siguientes: 

• “Cambiar características de fuente”, en la página 179 

• “Cambiar el color del texto”, en la página 181 

• “Alinear texto y elementos”, en la página 182 

Las etiquetas HTML que definen la estructura del documento más que su 
apariencia, por ejemplo, encabezados, párrafos y listas, siguen formando una parte 
considerable de la especificación HTML. De hecho, aunque tenga previsto utilizar 
hojas de estilos CSS para definir las características de fuentes de la página, 
conviene utilizar etiquetas estándar de encabezado, ya que ayudan a conservar la 
estructura de la página en los exploradores que no admiten hojas de estilos CSS. Si 
desea un ejemplo de esto, vea la Ayuda de Dreamweaver en un explorador 3.0. 
Consulte “Aplicar etiquetas de párrafo y encabezado”, en la página 178. 


Usar estilos HTML 

Utilice estilos HTML para guardar formato de texto y párrafo que desea utilizar 
en otras partes de los documentos. Una vez creado un estilo HTML basado en una 
o más etiquetas HTML, puede volver a aplicar ese formato a cualquier texto de 
cualquier documento utilizando la paleta de estilos HTML. 

A diferencia de los estilos CSS, el formato de los estilos HTML sólo afecta al texto 
al que se aplica o al que se crea usando un estilo HTML seleccionado. Si cambia el 
formato de un estilo HTML que ha creado, no se actualizará el texto que haya 
formateado originalmente con ese estilo. Si desea poder cambiar el formato y 
actualizar automáticamente todas las apariciones de ese formato, use estilos CSS 
(consulte “Aplicar formato al texto con hojas de estilos CSS”, en la página 188). 

Puede utilizar la paleta de estilos HTML para registrar los estilos HTML que use 
en el sitio para, posteriormente, compartirlos con otros usuarios o sitios locales y 
remotos. 
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Para mostrar la paleta de estilos HTML, lleve a cabo una de estas operaciones: 

• Elija Ventana > Estilos de HTML. 

• Haga clic en el botón Estilos de HTML en el lanzador. 

• Haga clic en el icono Estilos de HTML (un símbolo de párrafo amarillo en el 
minilanzador, en la parte inferior de la ventana de documento). 

Para ver un estilo HTML existente: 

1 En la paleta de estilos HTML, seleccione un estilo. 

Observe que Borrar estilo del párrafo y Borrar estilo de la selección se utilizan 
en el texto que tiene un estilo aplicado, pero no son estilos y no se pueden ver 
ni editar. 

2 Haga clic con el botón derecho del ratón (Windows) o haga clic mientras pulsa 
la tecla Control (Macintosh) y elija Editar en el menú contextual o haga doble 
clic en el estilo HTML y elija Editar en el menú contextual. 

3 En el cuadro de diálogo Definir estilo HTML, especifique la configuración del 
estilo. 

Las opciones de Aplicar a determinan si el estilo se aplica al texto seleccionado 
(Selección) o al bloque de texto actual (Párrafo). Las opciones de Al aplicar 
determinan si la configuración del estilo se agrega al formato de texto original 
(Agregar a existente) o se elimina del formato existente y se sustituye por la 
nueva configuración (Borrar estilo existente). 

Para aplicar un estilo HTML existente: 

En la paleta de estilos HTML, seleccione un estilo. 

• Si la casilla de verificación Aplicación automática de la parte inferior de la 
paleta está seleccionada, haga clic en el estilo. 

• Si no está seleccionada, haga clic en el estilo y, a continuación, en Aplicar. 

Para borrar formato de texto en el documento: 

1 Seleccione el texto formateado. 

2 En la paleta de estilos HTML, haga clic en Borrar estilo del párrafo o Borrar 
estilo de la selección. 

Borrar estilo del párrafo elimina el formato del bloque de texto actual en el 
documento. Borrar estilo de la selección elimina el formato del texto 
seleccionado. 

Nota: Puede utilizar Borrar estilo del párrafo y Borrar estilo de la selección para eliminar 
todo el formato, independientemente de cómo se aplicó originalmente (por ejemplo, a 
través de la paleta de estilos HTAAL o del inspector de propiedades). 
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Para quitar un estilo de la paleta de estilos HTML: 

1 En la paleta de estilos HTML, desactive la casilla de verificación para 
inhabilitar la opción Aplicación automática. 

2 Seleccione un estilo HTML. 

3 Haga clic en el icono Eliminar estilo (papelera de reciclaje) situado en la 
esquina inferior derecha de la paleta. 

Para crear un estilo HTML nuevo basado en texto existente: 

1 En el documento, seleccione o cree texto que tenga el formato que desea 
utilizar como base para el nuevo estilo HTML. Puede utilizar el inspector de 
propiedades para ver y aplicar formato. 

2 En la paleta de estilos HTML haga clic en el icono Nuevo estilo situado en la 
esquina inferior derecha. 

3 En el cuadro de diálogo Definir estilo HTML, asigne un nombre al estilo y 
ajuste el formato si lo desea. 

• Seleccione si desea aplicar el estilo HTML a texto seleccionado o a todo el 
párrafo. Observe que un estilo de párrafo se aplica a todo el bloque de texto en 
el que está situado el punto de inserción, independientemente de qué parte del 
texto esté seleccionada. 

• Seleccione si desea aplicar el estilo HTML además del estilo existente (CSS o 
HTML) del texto o el párrafo seleccionado o si prefiere borrar el formato de la 
selección o el párrafo y sustituirlo por el nuevo estilo. 

Observe que las opciones de formato de la paleta de estilos HTML coinciden 
con las del inspector de propiedades. 

4 Haga clic en Aceptar. 

Para crear un estilo HTML basado en un estilo HTML existente: 

1 Compruebe que no hay texto seleccionado en la ventana de documento. 

2 En la paleta de estilos HTML, seleccione un estilo. 

3 Haga clic con el botón derecho del ratón (Windows) o haga clic mientras pulsa 
la tecla Control (Macintosh) en el estilo y, a continuación, elija Duplicar en el 
menú contextual. 

Aparecerá el cuadro de diálogo Definir estilo HTML. Para restablecer las 
opciones predeterminadas, haga clic en Borrar. 

4 Siga los pasos 3 y 4 de las instrucciones para crear un estilo nuevo basado en el 
texto existente. 
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Para crear un estilo HTML a partir de cero: 

1 En la paleta de estilos HTML, haga clic en el icono Nuevo estilo. También 
puede elegir Texto > Estilos de HTML > Nuevo estilo. 

Aparecerá el cuadro de diálogo Definir estilo HTML. 

2 Siga los pasos 3 y 4 de las instrucciones para crear un estilo nuevo basado en el 
texto existente. 

Haga clic en Borrar para restablecer las opciones predeterminadas del cuadro de 
diálogo. 

3 Haga clic en Aceptar. 

Para editar un estilo HTML existente: 

1 Compruebe que no hay texto seleccionado en la ventana de documento. 

2 En la paleta de estilos HTML, compruebe que la opción Aplicación automática 
está desactivada. 

Si la opción Aplicación automática está activada, el estilo HTML se aplicará 
cuando lo seleccione en la paleta de estilos HTML. 

3 En la paleta de estilos HTML, haga clic con el botón derecho del ratón 
(Windows) o mientras pulsa la tecla Control (Macintosh) en el estilo y, a 
continuación, elija Editar en el menú contextual. 

Aparecerá el cuadro de diálogo Definir estilo HTML. Para restablecer las 
opciones predeterminadas, haga clic en Borrar. 

Al editar un estilo HTML, Dreamweaver no actualiza automáticamente el texto 
formateado anteriormente con ese estilo. Si desea actualizar el formato aplicado 
con un estilo, utilice una hoja de estilos CSS (consulte “Aplicar formato al texto 
con hojas de estilos CSS”, en la página 188). 

Para compartir los estilos HTML con otros sitios o usuarios: 

1 Elija Ventana > Archivos del sitio para abrir la ventana Sitio en Ver archivos del 
sitio. 

2 En el panel derecho, abra la carpeta raíz del sitio y, a continuación, abra la 
carpeta Library. 

Observe que hay un archivo llamado styles.xml. Este archivo contiene todos los 
estilos HTML del sitio. Puede colocar, desproteger, proteger y copiar este 
archivo como lo haría con cualquier otro archivo del sitio. También puede crear 
Design Notes para el archivo styles.xml. Recuerde que deberá proteger el 
archivo styles.xml antes de crear o editar un estilo para un sitio remoto. 

Para obtener más información sobre el uso de estas opciones, consulte 
“Configurar un sitio remoto”, en la página 140. 
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Aplicar formato al texto con hojas de estilos CSS 

Un estilo es un grupo de atributos de formato que controla la apariencia de un 
rango de texto en un documento. Una hoja de estilos CSS se puede emplear para 
controlar varios documentos al mismo tiempo, e incluye todos los estilos de un 
documento. La ventaja de utilizar una hoja de estilos CSS sobre el uso de un estilo 
HTML estriba en que, además de estar vinculada a múltiples documentos, cuando 
se actualiza o cambia un estilo CSS, se actualiza automáticamente el formato de 
todos los documentos que utilizan esa hoja de estilos. 

Los estilos CSS se identifican mediante un nombre o una etiqueta HTML, lo que 
permite cambiar el atributo de un estilo y ver cómo se refleja el cambio 
inmediatamente en todo el texto al que se aplica dicho estilo. Los estilos CSS en 
documentos HTML pueden controlar la mayoría de los atributos tradicionales de 
formato de texto, como fuente, tamaño y alineación. También pueden especificar 
atributos exclusivos de HTML, como posición, efectos especiales e imágenes 
dinámicas. 

Las hojas de estilos CSS residen en el área HEAD de un documento y definen una 
serie de estilos. Los estilos CSS pueden definir los atributos de formato de 
etiquetas HTML, rangos de texto identificados por un atributo CLASS o texto que 
cumpla los criterios de la especificación de hojas de estilos en cascada (CSS). 
Dreamweaver reconoce los estilos definidos en documentos existentes siempre que 
se ajusten a las directrices de CSS. 

Las hojas de estilos CSS funcionan en exploradores 4.0 y posteriores. Internet 
Explorer 3.0 reconoce algunas hojas de estilos CSS, pero la mayoría de los 
exploradores anteriores las ignoran. 

Hay tres tipos de hojas de estilos CSS en Dreamweaver: 

• Los estilos CSS personalizados son similares a los que se emplean en los 
programas de tratamiento de texto, salvo que no distinguen entre estilo de 
carácter y de párrafo. Puede aplicar estilos CSS personalizados a cualquier rango 
o bloque de texto. Si el estilo CSS se aplica a un bloque de texto (por ejemplo, 
un párrafo completo o una lista sin ordenar), se agregará un atributo CLASS a la 
etiqueta del bloque (por ejemplo, P CLASS = "m¡Estilo" o UL CLASS = "miEst¡lo"). Si el 
estilo CSS se aplica a un rango de texto, se insertarán alrededor del texto 
seleccionado etiquetas SPAN que contengan el atributo CLASS. Consulte “Aplicar 
un estilo CSS personalizado (clase)”, en la página 192. 

• Los estilos de etiquetas HTML redefinen el formato de una determinada 
etiqueta, como H1. Cuando se crea o cambia un estilo CSS para la etiqueta H1, 
todo el texto formateado con la etiqueta H1 se actualiza inmediatamente. 

• Los estilos del selector CSS redefinen el formato de una determinada 
combinación de etiquetas (por ejemplo, TD H2 se aplica cada vez que aparece un 
encabezado H2 dentro de una celda de tabla) o de todas las etiquetas que 
contienen un atributo ID específico (por ejemplo, #m¡Estilo se aplica a todas las 
etiquetas que contienen el par atributo-valor ID="m¡Estilo"). 
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La aplicación manual de formato HTML prevalece sobre el formato aplicado con 
estilos CSS (o HTML). Para que los estilos CSS controlen el formato de un 
párrafo, deberá quitar todos los estilos HTML y el formato HTML manual. 

Si bien puede establecer un número ilimitado de atributos de estilo CSS definidos 
por la especificación CSS 1 en Dreamweaver, no todos los atributos aparecerán en 
la ventana de documento. Los atributos que no aparecen se marcarán con un 
asterisco (*) en el cuadro de diálogo Definición de estilo. Algunos de los atributos 
de estilo CSS que pueden establecerse con Dreamweaver tienen una apariencia 
distinta en Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0, y otros no 
son compatibles actualmente con ningún explorador. 

Propiedades de los estilos CSS 

El World Wide Web Consortium es responsable de la especificación de hojas de 
estilos en cascada (CSS1), donde se definen las propiedades de estilos CSS (por 
ejemplo, fuente, color, relleno, margen, espaciado entre palabras) que controlan la 
apariencia de elementos de la página Web. Dreamweaver permite establecer 
cualquier propiedad CSS1. 

En Internet Explorer 4.0 puede utilizar un lenguaje de secuencia de comandos 
como JavaScript o VBScript para cambiar las propiedades de posición y estilo CSS 
de los elementos después de cargar la página. En Netscape Navigator 4.0 no se 
pueden cambiar las propiedades de estilos CSS después de cargar la página, pero sí 
las de posición. 


Crear o establecer vínculos con una hoja de estilos CSS externa 

Una hoja de estilos CSS es un archivo de texto externo que contiene estilos y 
especificaciones de formato. Si edita una hoja de estilos CSS externa, todos los 
documentos vinculados a esa hoja se actualizarán con los cambios. 

La Ayuda de Dreamweaver está formada por páginas HTML que utilizan una hoja 
de estilos CSS vinculada llamada help.css. Abra este archivo (situado en la carpeta 
Help/html) en un editor de texto para ver los códigos de definiciones de estilos 
CSS. Abra alguno de los archivos de temas (los que comienzan por número) para 
ver cómo se vincula la hoja de estilos CSS al documento utilizando una etiqueta 
LINKy cómo se aplican los estilos específicos. 
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Para crear o establecer vínculos con una hoja de estilos externa: 

1 Elija Ventana > Estilos CSS o haga clic en el icono Estilos CSS del lanzador. 

2 En la paleta de estilos CSS, haga clic en el icono Abrir hoja de estilos. 

3 En el cuadro de diálogo Editar hoja de estilos, haga clic en Vínculo. 

4 En el cuadro de diálogo Vincular hoja de estilos externa, lleve a cabo una de 
estas operaciones: 

• Haga clic en Examinar (Windows) o Seleccionar (Macintosh) para localizar una 
hoja de estilos CSS externa o introduzca la ruta de la hoja de estilos en cuadro 
Archivo/URL. 

• Cree una hoja de estilos CSS externa introduciendo un nombre de archivo 
nuevo (que no exista en la ubicación especificada). El nombre de archivo debe 
tener la extensión .css. 

5 Elija la opción Vincular o Importar para especificar y crear la etiqueta empleada 
para adjuntar la hoja de estilos CSS externa al documento y, a continuación, 
haga clic en Aceptar. 

Importar lleva la información del archivo de hoja de estilos CSS externa al 
documento actual, mientras que Vincular accede a la información y la 
transmite sin transferirla. Si bien tanto Importar como Vincular llaman a todos 
los estilos de la hoja externa al documento actual, Vincular ofrece más 
posibilidades y funciona con más exploradores. 

El nombre de la hoja de estilos CSS externa aparece con el identificador 
(vincular o importar) en la lista de estilos del cuadro de diálogo Editar hoja de 
estilos. Siga estos pasos para crear o editar los estilos definidos en la hoja de 
estilos CSS externa. 

6 En el cuadro de diálogo Editar hoja de estilos, seleccione el nombre de la hoja 
externa y haga clic en Editar. 

Se abrirá el cuadro de diálogo Editar hoja de estilos para esa hoja de estilos. 

7 Haga clic en Nuevo para definir estilos en la hoja de estilos CSS externa. 

8 En el cuadro de diálogo Nuevo estilo, defina el nuevo estilo. Consulte “Crear 
una hoja de estilos CSS”, en la página 191. 

9 Haga clic en Guardar cuando termine de definir los estilos. 

Editar una hoja de estilos CSS externa 

Al editar una hoja de estilos CSS que controla el texto del documento, cambiará 

inmediatamente el formato de todo el texto controlado por dicha hoja de estilos. 

Los cambios realizados afectarán a todos los documentos vinculados a la hoja de 

estilos. 
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Para editar una hoja de estilos CSS externa: 

1 Abra cualquier documento vinculado a la hoja de estilos CSS externa que 
desea modificar. 

2 Lleve a cabo una de estas operaciones: 

• Elija Ventana > Estilos CSS o haga clic en Estilos CSS en el lanzador. A 
continuación, haga clic en el icono Abrir hoja de estilos en la paleta de estilos 
CSS. 

• Elija Texto > Estilos CSS > Editar hoja de estilos. 

3 En el cuadro de diálogo Editar hoja de estilos, seleccione el nombre de la hoja 
externa y haga clic en Editar. 

Aparecerá un segundo cuadro de diálogo Editar hoja de estilos mostrando los 
estilos de la hoja externa. 

4 Edite los estilos. Consulte “Crear una hoja de estilos CSS”, en la página 191. 

5 Haga clic en Guardar cuando termine de editar los estilos. 

Crear una hoja de estilos CSS 

Cree una hoja de estilos CSS para automatizar la aplicación de formato a etiquetas 
HTML o a rangos de texto identificados mediante un atributo CLASS. 

Para crear una hoja de estilos CSS: 

1 Elija Ventana > Estilos CSS y haga clic en el icono Nuevo estilo de la paleta de 
estilos CSS. 

2 Dispone de las siguientes opciones de estilos CSS: 

Crear estilo person. (clase) Crea un estilo que se puede aplicar como un 
atributo CLASS a un rango o un bloque de texto. 

Redefinir etiqueta HTML Redefine el formato predeterminado de una etiqueta 
HTML especificada. 

Usar selector CSS Define el formato de una determinada combinación de 
etiquetas o de todas las etiquetas que contienen un atributo ID específico. 

3 Introduzca un nombre, una etiqueta o un selector para el nuevo estilo: 

• Los nombres de estilo CSS personalizados deben comenzar por un punto. Si no 
introduce el punto, lo hará Dreamweaver. 

• Para redefinir un estilo de etiqueta HTML, introduzca una etiqueta HTML o 
elija una en el menú emergente. 

• Para un selector CSS, introduzca criterios válidos para selectores (por ejemplo, 
TD H2 o #miEstilo), o elija un selector en el menú emergente. 
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4 Haga clic en un nombre de panel en la parte izquierda del cuadro de diálogo y 
elija la siguiente configuración de formato para el nuevo estilo CSS en el panel 
correspondiente: Deje los atributos en blanco si no son importantes para el 
estilo. 

Los atributos que no aparecen en la ventana de documento se marcarán con un 
asterisco (*) en el cuadro de diálogo Definición de estilo. Algunos de los 
atributos de estilo CSS que pueden establecerse con Dreamweaver tienen una 
apariencia distinta en Microsoft Internet Explorer 4.0 y Netscape Navigator 
4.0, y otros no son compatibles actualmente con ningún explorador. 

Consulte los temas siguientes en la Ayuda de Dreamweaver para obtener 
información sobre configuraciones específicas: 

• Panel Tipo de Definición de estilo 

• Panel Fondo de Definición de estilo 

• Panel Bloque de Definición de estilo 

• Panel Cuadro de Definición de estilo 

• Panel Borde de Definición de estilo 

• Panel Lista de Definición de estilo 

• Panel Posición de Definición de estilo 

• Panel Extensiones de Definición de estilo 

Cuando se crea un estilo personalizado (clase), aparece en la paleta de estilos CSS y 
en el submenú Texto > Estilos CSS. Los estilos de etiquetas HTML y del selector 
CSS no aparecen en la paleta de estilos CSS porque no se pueden aplicar. Estos 
estilos se reflejan en la ventana de documento automáticamente cada vez que 
aparece la etiqueta o el selector. 

Aplicar un estilo CSS personalizado (clase) 

Los estilos CSS personalizados (clase) son los únicos que se pueden aplicar a 
cualquier texto del documento, independientemente de las etiquetas que 
controlen dicho texto. La paleta de estilos CSS muestra los nombres de todos los 
estilos disponibles. 

No confunda los estilos CSS personalizados con opciones como Negrita o Variable 
del submenú Texto > Estilo. Estas opciones son atributos de formato predefinidos 
que corresponden a etiquetas HTML específicas. 

Cuando se aplican dos o más estilos CSS al mismo texto, éstos pueden entrar en 
conflicto y producir resultados imprevistos. Consulte “Estilos en conflicto”, en la 
página 193. 
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Para aplicar un estilo CSS personalizado: 

1 Elija Ventana > Estilos CSS. 

2 Seleccione el texto al que desea aplicar un estilo CSS. 

Sitúe el punto de inserción en un párrafo para aplicar el estilo a todo el párrafo. 

Para especificar la etiqueta exacta a la que se deberá aplicar el estilo CSS, 
selecciónela con el selector de etiquetas situado en la parte inferior izquierda de 
la ventana de documento. También puede cambiar la selección de etiquetas con 
el menú Aplicar a de la paleta de estilos CSS. 

Si selecciona un rango de texto dentro de un párrafo, el estilo CSS sólo afectará 
al rango seleccionado. 

3 Haga clic en el nombre de un estilo de la paleta de estilos CSS. 

También puede aplicar un estilo CSS siguiendo este procedimiento: elija un 
nombre de estilo en el submenú Texto > Estilos CSS o haga clic con el botón 
derecho del ratón (Windows) o mientras pulsa la tecla Control (Macintosh) y elija 
el nombre de estilo en el submenú Estilos CSS del menú contextual. La etiqueta 
de la selección actual aparecerá al lado del comando Estilo personalizado. 


Estilos en conflicto 

Cuando se aplican dos o más estilos CSS al mismo texto, éstos pueden entrar en 
conflicto y producir resultados imprevistos. Los exploradores aplican atributos de 
estilo de acuerdo con las reglas siguientes: 

• Si se aplican dos estilos al mismo texto, el explorador muestra todos los 
atributos de ambos estilos a menos que entren en conflicto. Por ejemplo, un 
estilo puede especificar azul como color de texto y el otro estilo puede 
especificar rojo. 

• Si los atributos de dos estilos aplicados al mismo texto entran en conflicto, el 
explorador mostrará el atributo del estilo más interno (el más próximo al texto). 

• Si hay un conflicto directo, los atributos de estilos CSS (estilos aplicados con el 
atributo CLASS) prevalecerán sobre los atributos correspondientes a estilos de 
etiquetas HTML. 

En el ejemplo siguiente, el estilo definido para H1 podría especificar la fuente, el 
tamaño y el color de todos los párrafos H1, pero el estilo CSS personalizado .Blue 
aplicado a este párrafo prevalece sobre la configuración de color del estilo H1. El 
segundo estilo CSS personalizado .Red prevalece sobre .Blue porque se encuentra 
dentro del estilo .Blue. 

<H1 xSPAN CLASS = "Blue">Este párrafo está controlado por el estilo personalizado .Blue y 
el estilo de la etiqueta HTML H1. 

<SPAN CLASS = "Red">, excepto esta frase, que está controlada por el estilo .Red. 

</SPAN> 

Ahora volvemos al estilo .Blue.</SPAN> </H1 > 
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Usar la paleta de estilos CSS 

Utilice la paleta de estilos CSS para aplicar estilos CSS personalizados a la 
selección actual. La paleta de estilos CSS sólo muestra estilos CSS personalizados 
(clase); los estilos de las etiquetas HTML redefinidas y del selector CSS no 
aparecen en la paleta de estilos CSS porque se aplican automáticamente a 
cualquier texto controlado por la etiqueta o el selector especificados. Si lo único 
que quiere es cortar y pegar estilos reutilizables, pero que no se puedan actualizar 
ni personalizar, utilice la paleta de estilos HTML. 

Elija Ventana > Estilos CSS para mostrar la paleta de estilos CSS. 

Aplicar a Muestra la etiqueta de la selección actual. Si desea seleccionar otra 
etiqueta, elíjala en el menú. 

Abrir hoja de estilos Abre el cuadro de diálogo Editar hoja de estilos. Edite los 
estilos en el documento actual o en una hoja de estilos externa. 

Consulte también “Aplicar formato al texto con hojas de estilos CSS”, en la 
página 188. 

Nota: Haga clic con el botón derecho del ratón (Windows) o mientras pulsa la tecla Control 
(Macintosh) en la paleta de estilos CSS para abrir un menú contextual que incluye los 
comandos Nuevo, Editar, Duplicar, Borrar y Aplicar. 


Configurar las preferencias de formato de hojas de estilos 

Las preferencias de formato de hoja de estilos CSS controlan la forma en que 
Dreamweaver escribe el código que define los estilos CSS. Los estilos CSS se 
pueden escribir en una forma abreviada que resulta más fácil para algunos 
usuarios. Algunas versiones antiguas de los exploradores no interpretan 
correctamente la forma abreviada. A menos que desee que Dreamweaver escriba 
los estilos en forma abreviada, no hay ninguna razón para cambiar las preferencias 
de formato de las hojas de estilos CSS. 

Elija Edición > Preferencias y seleccione Estilos CSS para mostrar las preferencias 
de Formato Hoja Estilos CSS. Consulte también “Aplicar formato al texto con 
hojas de estilos CSS”, en la página 188. 

Al crear estilos Forma abreviada para Determina qué atributos de estilos CSS 
escribe Dreamweaver en forma abreviada. 

Al editar estilos CSS Usar forma abreviada Controla si Dreamweaver reescribe los 
estilos existentes en forma abreviada. Elija Si la utiliza el original para que 
Dreamweaver deje todos los estilos tal como están. Elija Según configuración 
anterior para que Dreamweaver reescriba los estilos en forma abreviada de acuerdo 
con los atributos especificados en las casillas de verificación de Forma abreviada 
para. 
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Convertir estilos CSS a formato HTML 


Si ha utilizado estilos CSS para especificar opciones de formato de texto (como 
familia, tamaño, color y decoración de fuentes) y, posteriormente, decide que 
desea que las opciones de formato se puedan ver en un explorador 3.0, puede 
utilizar el comando Archivo > Convertir > Compatible con explorador 3.0 para 
convertir toda la información posible de estilos a etiquetas HTML. 


Para convertir un archivo que utiliza estilos CSS en un archivo compatible con 
exploradores 3.0: 

1 Elija Archivo > Convertir > Compatible con explorador 3.0. 

2 En el cuadro de diálogo que aparece, seleccione Estilos CSS a formato HTML. 

Si elige la opción Tablas a capas, Dreamweaver reemplazará todas las capas por 
una sola tabla que conservará la posición original. 

Los estilos CSS se sustituyen, si es posible, por etiquetas HTML como B y FONT. 
Todo el formato CSS que no se pueda convertir a HTML será eliminado. 
Consulte “Tabla de conversión de CSS a formato HTML”, en la página 196 
para obtener información sobre los estilos que se convierten y los que se 
eliminan. 

3 Haga clic en Aceptar. Dreamweaver abrirá el archivo convertido en una ventana 
nueva y sin título. 

Nota: Es imprescindible realizar este procedimiento de conversión cada vez que cambia el 
archivo original para actualizar el archivo compatible con exploradores 3.0. Por este motivo, 
recomendamos no llevar a cabo la operación hasta estar completamente satisfecho con el 
archivo original. 


Aplicar formato al texto 195 



Tabla de conversión de CSS a formato HTML 


Los atributos CSS que figuran en la tabla siguiente se convierten a formato 
HTML con el comando Archivo > Convertir > Compatible con explorador 3.0. 
(Consulte “Convertir estilos CSS a formato HTML”, en la página 195.) Los 
atributos que no figuran en ella se eliminan. 


Atributo CSS 

Convertido a 

color 

PONT COLOR 

font-family 

PONT FACE 

font-size 

PONT SIZE = "[1-7]“ 

font-style: oblique 

1 

font-style: ¡talic 

1 

font-weight 

B 

list-style-type: square 

UL TYPE = "square" 

llst-style-type: circle 

UL TYPE="circle" 

list-style-type: dlsc 

UL TYPE= M disc" 

llst-style-type: upper-roman 

OL TYPE — T 

list-style-type: lower-roman 

OL TYPE="¡ 11 

llst-style-type: upper-alpha 

OL TYPE="A M 

list-style-type: lower-alpha 

OL TYPE="a" 

llst-style 

UL u OL con TYPE, según el caso 

text-allgn 

P ALIGN o DIV ALIGN, según el caso 

text-decoratlon: underllne 

U 

text-decoratlon: llne-through 

STRIKE 
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Comprobar la ortografía 

Utilice el comando Ortografía del menú Texto para comprobar la ortografía del 
documento actual. El comando Ortografía no tiene en cuenta las etiquetas 
HTML ni los valores de atributo. 

De forma predeterminada, el corrector ortográfico utiliza el diccionario de inglés 
de Estados Unidos. Para cambiar de diccionario, elija Edición > Preferencias > 
General y seleccione otro diccionario en el menú. Se pueden descargar 
diccionarios de otros idiomas desde el Centro de Servicio técnico de 
Dreamweaver. 

Cuadro de diálogo Ortografía 

Utilice las siguientes opciones del cuadro de diálogo Ortografía para comprobar la 
ortografía del documento: Para mostrar el cuadro de diálogo, elija Texto > 
Ortografía. 

Agregar a personal Incorpora la palabra no reconocida al diccionario personal. 
Para borrar palabras del diccionario personal, edite el archivo Personal.dat en un 
editor de texto. 

Omitir Ignora esta aparición de la palabra no reconocida. 

Omitir todas Ignora todas las apariciones de la palabra no reconocida. 

Cambiar Sustituye esta aparición de la palabra no reconocida por el texto que 
usted escriba en el cuadro Cambiar por o por la selección de la lista Sugerencias. 

Cambiar todas Reemplaza todas las apariciones de la palabra no reconocida. 
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CAPÍTULO 7 

Insertar imágenes 


Dreamweaver, como la mayoría de los exploradores, puede mostrar imágenes 
JPEG y GIE Dreamweaver, Microsoft Internet Explorer 4.0 o posteriores y 
Netscape Navigator 4.04 o posteriores también admiten imágenes PNG. 

En general, JPEG es el mejor formato para imágenes fotográficas o de tonos 
continuos, mientras que GIF es el preferido para imágenes de tonos no continuos 
o con grandes áreas de colores lisos. El formato PNG es un sustituto de GIF, sin 
patente, que incluye soporte para color indexado, escala de grises e imágenes en 
color verdadero. También proporciona soporte de canal alfa para transparencias. 
PNG es el formato de archivo nativo de Macromedia Fireworks. 

Para utilizar una imagen como fondo de la página, especifíquela como propiedad 
de la página. Consulte “Definir una imagen de fondo o un color de página”, en la 
página 96. Para solapar imágenes, insértelas en capas. Consulte “Usar capas”, en la 
página 235. 
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Insertar una imagen 

Al insertar una imagen en un documento de Dreamweaver, Dreamweaver genera 
automáticamente una referencia al archivo en el código HTML. Para asegurarse 
de que esta referencia sea correcta, el archivo de imagen debe estar dentro del sitio 
actual. Si no lo está, Dreamweaver le preguntará si desea copiar el archivo a una 
carpeta del sitio actual. 

Para insertar una imagen: 

1 Lleve a cabo una de estas operaciones: 

• Sitúe el punto de inserción en el lugar donde desea que aparezca la imagen 
dentro de la ventana de documento y, a continuación, elija Insertar > Imagen o 
haga clic en el botón Insertar imagen del panel Común en la paleta de objetos. 

• Arrastre el botón Insertar imagen desde la paleta de objetos hasta la posición 
deseada de la ventana de documento. 

• Arrastre una imagen desde el escritorio hasta la posición deseada de la ventana 
de documento; a continuación siga con el paso 3. 

2 En el cuadro de diálogo en el que aparezca, haga clic en Examinar (Windows) o 
Seleccionar (Macintosh) para elegir un archivo, o bien escriba la ruta de acceso 
al archivo de imagen. 

Si está trabajando en un documento que no está guardado, Dreamweaver 
genera una referencia de archivo:// al archivo de imagen. Al guardar el 
documento en cualquier lugar del sitio, Dreamweaver convierte la referencia en 
una ruta relativa al documento. 

3 Defina las propiedades de la imagen en el inspector de propiedades. 
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Configurar propiedades de imagen 

Para ver las siguientes propiedades en el inspector de propiedades, seleccione una 
imagen en la ventana de documento. 

El inspector de propiedades muestra inicialmente las propiedades utilizadas con 
mayor frecuencia. Haga clic en la flecha de ampliación, situada en el ángulo 
inferior derecho, para ver todas las propiedades. 

Nombre Permite asignar nombre a una imagen para poder hacer referencia a ella 
con un lenguaje de secuencia de comandos como JavaScript o VBScript. 

An y Al Reserva espacio para una imagen en una página al cargarla en un 
explorador. Dreamweaver rellena automáticamente estos campos con el tamaño 
original de la imagen. Los valores predeterminados y sin etiqueta son píxeles. 
También se pueden emplear las siguientes unidades: pe (picas), pt (puntos), in 
(pulgadas), mm (milímetros) y cm (centímetros) o combinaciones de estas, como 
2in+5mm; Dreamweaver convierte los valores a píxeles en el código fuente 
HTML. 

Si selecciona valores de An y Al que no se corresponden con la anchura y la altura 
reales de la imagen, la imagen podría no mostrarse correctamente en un 
explorador. (Para restablecer los valores originales, haga clic en las etiquetas de 
campo.) Puede cambiar estos valores para establecer la escala del tamaño de 
visualización de esta imagen, aunque no por ello se reduce el tiempo de descarga, 
ya que el explorador descarga todos los datos de la imagen antes de asignarle una 
escala. Si desea reducir el tiempo de descarga y garantizar que todas las veces que 
aparezca una imagen tenga el mismo tamaño, utilice una aplicación de edición de 
imágenes. 

Orig Especifica el archivo de origen para la imagen. Haga clic en el icono de 
carpeta para localizar el archivo de origen o escriba la ruta correspondiente. Para 
obtener información sobre la introducción de rutas, consulte “Rutas absolutas”, en 
la página 110. 

Vincular Especifica un hipervínculo para la imagen. Arrastre el icono de 
señalización hasta un archivo de la ventana Sitio, haga clic en el icono de carpeta 
para buscar y seleccionar un documento del sitio o escriba el URL. 

Alinear Alinea una imagen y texto en la misma línea. Consulte “Alinear 
elementos”, en la página 203. 

Alt Especifica el texto alternativo que aparece en lugar de la imagen en los 
exploradores que sólo admiten texto o en aquéllos configurados para descargar las 
imágenes manualmente. Para usuarios con deficiencias visuales que usan 
sintetizadores de voz con exploradores que sólo admiten texto, el texto se expresa 
en voz alta. En algunos exploradores, este texto también aparece cuando el cursor 
se sitúa sobre la imagen. 

Espacio V y Espacio H Agregan espacio, en píxeles, en la parte superior e inferior o 
a izquierda y derecha de la imagen. 
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Destino Especifica el marco o la ventana donde se cargará la página vinculada. 
(Esta opción no está disponible cuando no hay ningún vínculo en la imagen.) En 
la lista figuran los nombres de todos los marcos del documento actual. Si el marco 
especificado no existe cuando se abre el documento en un explorador, la página 
vinculada se cargará en una ventana nueva con el nombre que usted haya 
especificado. Desde el momento que exista la ventana, podrá enviar otros archivos 
a ese destino. También puede seleccionar estos nombres de destino reservados: 

• blank Carga el archivo vinculado en una ventana de explorador nueva y sin 
nombre. 

• parent Carga el archivo vinculado en el conjunto de marcos padre o en la 
ventana del marco que contiene el vínculo. Si el marco que contiene el vínculo 
no está anidado, el archivo vinculado se cargará en la ventana completa del 
explorador. 

• self Carga el archivo vinculado en el mismo marco o ventana que el vínculo. 
Este destino está implícito, por lo que normalmente no es preciso especificarlo. 

• _top Carga el archivo vinculado en la ventana completa del explorador, 
quitando así todos los marcos. 

Orig base Especifica la imagen que debe cargarse antes que la imagen principal. 
Numerosos diseñadores utilizan una versión de 2 bits (blanco y negro) de la 
imagen principal, ya que se carga rápidamente y ofrece a los visitantes una idea de 
aquello que están esperando. Sin embargo, puede utilizar cualquier imagen con las 
mismas dimensiones que la principal. 

Borde Establece la anchura en píxeles del borde del vínculo alrededor de la 
imagen. Introduzca 0 para especificar sin bordes. 

Mapa Permite crear mapas sensibles del lado del cliente. Consulte “Crear mapas 
sensibles”, en la página 210. 

Actualizar Restablece los valores de An y Al para devolver el tamaño original a la 
imagen. 

Editar Inicia el editor de imágenes que ha especificado en las preferencias de 
editores externos y abre la imagen seleccionada. Cuando guarde el archivo de 
imagen y vuelva a Dreamweaver, el programa actualizará la ventana de documento 
con la imagen editada. Consulte “Usar un editor de imágenes externo”, en la 
página 205. 
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Alinear elementos 


Las siguientes opciones de alineación aparecen en el menú desplegable Alineación 
del inspector de propiedades y pueden asociarse a determinados elementos, como 
imágenes o plug-ins. También puede utilizar los botones de alineación (izquierda, 
derecha y centro) para colocar los elementos seleccionados. 

Predeterminado por el explorador Suele especificar una alineación con la línea de 
base. (El valor predeterminado puede variar en función del explorador.) 

Línea de base e Inferior Alinean la línea de base del texto con la parte inferior del 
objeto seleccionado. 

Inferior absoluta Alinea la parte inferior absoluta del texto, incluidos los trazos 
bajos (como en la letra g) con la parte inferior del objeto seleccionado. 

Superior Alinea la parte superior del carácter más alto de la línea de texto con la 
parte superior del objeto seleccionado. 

Texto superior Alinea el carácter más alto de la línea de texto con la parte superior 
del objeto seleccionado. 

Medio Alinea la línea de base del texto con el punto medio del objeto. 

Medio absoluta Alinea el punto medio del objeto seleccionado con el punto 
medio del texto. 

Izquierda Sitúa el objeto seleccionado en el margen izquierdo, ajustando a la 
derecha el texto que está a su alrededor. Si el texto alineado a la izquierda está en la 
línea delante del objeto, suele pasar a otra línea los objetos alineados a la izquierda. 

Derecha Sitúa el objeto en el margen derecho, ajustando a la izquierda el texto que 
está a su alrededor. Si el texto alineado a la derecha precede al objeto en la línea, 
los objetos alineados a la derecha suelen pasar a una nueva línea. 

Cambiar el tamaño de imágenes y otros elementos 

Puede cambiar visualmente el tamaño de elementos tales como imágenes, plug- 
ins, películas Shockwave o Flash, applets y controles de ActiveX en la ventana de 
documento de Dreamweaver. El cambio visual del tamaño ayuda a determinar 
cómo afecta al diseño un elemento con distintas dimensiones. 

Al cambiar de tamaño se restablecen los atributos WIDTH y HEIGHT del elemento. 
Los campos An y Al del inspector de propiedades muestran la anchura y la altura 
actuales del elemento conforme cambia su tamaño. El tamaño del archivo del 
elemento no cambia. 

Las películas Flash y otros elementos basados en vectores son totalmente escalables 
y no pierden calidad al cambiar de tamaño. 
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Los elementos de mapas de bits, como las imágenes GIF, JPEG y PNG pueden 
convertirse a píxeles o distorsionarse si restablece sus atributos WIDTH y HEIGHT. 
Mantenga pulsada la tecla Mayús mientras cambia el tamaño de un mapa de bits 
para mantener la relación de aspecto. No obstante, es recomendable cambiar el 
tamaño de estos elementos visualmente en Dreamweaver sólo para determinar el 
diseño. Una vez determinado el tamaño idóneo de la imagen, edite el archivo en 
una aplicación de edición de imágenes. La edición de la imagen también puede 
reducir su tamaño de archivo y, por consiguiente, su tiempo de transferencia. 

Para cambiar el tamaño de un elemento: 

1 Seleccione el elemento (por ejemplo, una imagen o una película Shockwave) en 
la ventana de documento. 

Aparecen manej adores de cambio de tamaño en los lados inferior y derecho del 
elemento y en la esquina inferior derecha. Si no aparecen los manej adores de 
cambio de tamaño, haga clic fuera del elemento cuyo tamaño desea cambiar y 
vuelva a seleccionarlo o haga clic en <¡mg> en el selector de etiquetas para 
seleccionar el elemento. 

2 Cambie el tamaño del elemento mediante la realización de una de las siguientes 
operaciones: 

• Para ajustar la anchura del elemento, arrastre el manejador de selección del 
lateral derecho. 

• Arrastre el manejador de selección de la parte inferior para ajustar la altura del 
elemento. 

• Arrastre el manejador de selección de la esquina para ajustar al mismo tiempo la 
anchura y la altura del elemento. 

• Arrastre el manejador de selección de la esquina mientras pulsa la tecla Mayús 
para conservar la relación de aspecto (su relación anchura/altura) al ajustar sus 
dimensiones. 

Se puede cambiar visualmente el tamaño de los elementos hasta un mínimo de 6 
por 6 píxeles. Para ajustar la anchura y la altura de un elemento con un tamaño 
menor (por ejemplo, 1 píxel por 1 píxel), utilice el inspector de propiedades para 
introducir un valor numérico. 

Para restablecer las dimensiones originales de un elemento al que ha cambiado de 
tamaño, haga clic en las etiquetas An y Al del inspector de propiedades. 
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Usar un editor de imágenes externo 

Puede abrir un editor de imágenes externo con la imagen seleccionada 
directamente desde Dreamweaver. Al volver a Dreamweaver después de guardar el 
archivo de imagen, los cambios realizados en la imagen estarán visibles en la 
ventana de documento. 

Puede utilizar Macromedia Fireworks como editor de imágenes externo. Fireworks 
3 utiliza Design Notes para determinar el lugar en que se encuentra el archivo 
PNG original en el disco duro local, o bien le pedirá que lo localice. 

Fireworks 2 no utiliza Design Notes, pero le solicita que localice el archivo PNG 
original. Fireworks 1 busca automáticamente un archivo PNG con el mismo 
nombre en la carpeta que contiene el archivo seleccionado. Por ejemplo, si 
selecciona una imagen cuyo archivo de origen es imágenes/miFoto.gif e imágenes/ 
también contiene un archivo llamado miFoto.png, Fireworks abrirá el archivo 
PNG. Como formato de archivo nativo de Fireworks, PNG conserva toda la 
información original de capas, vectores, colores y efectos, al tiempo que todos los 
elementos se pueden editar completamente en cualquier momento. Los archivos 
se deben guardar con la extensión .png para que Dreamweaver pueda reconocerlos 
como tales. 

Si elige otra aplicación de edición de imágenes como editor externo y la inicia 
desde Dreamweaver, la aplicación abrirá la imagen seleccionada (por ejemplo, 
imágenes/miFoto.gif). Si lo prefiere, puede abrir manualmente el archivo original 
desde el que se generó el GIF (por ejemplo, miFoto.psd podría ser el archivo 
original de Photoshop), realizar los cambios y volver a generar la imagen GIF. 
Dreamweaver actualizará la imagen en la ventana de documento cuando vuelva al 
programa. 

Para iniciar el editor de imágenes externo, lleve a cabo una de estas operaciones: 

• Mantenga pulsada la tecla Control (Windows) o Comando (Macintosh) y haga 
doble clic en la imagen que desea editar. 

• Haga clic con el botón derecho del ratón (Windows) o pulse la tecla Control y 
haga clic (Macintosh) en la imagen que desea editar y elija Editar en el menú 
contextual. 

• Haga clic con el botón derecho del ratón (Windows) o haga clic mientras pulsa 
la tecla Control (Macintosh) en la imagen que desea editar y elija un editor 
externo del menú contextual. 

• Seleccione la imagen que desea editar y haga clic en Editar imagen en el 
inspector de propiedades. 

• Haga doble clic en el archivo de imagen en la ventana Sitio para iniciar el editor 
de imágenes externo principal. Si no ha especificado ningún editor de 
imágenes, Dreamweaver iniciará el editor predeterminado para el tipo de 
archivo en cuestión. 
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Nota: Al abrir una imagen desde la ventana Sitio, las funciones de integración de 
Fireworks descritas más arriba no surten efecto; Fireworks no abrirá el archivo PNG 
original. Para utilizar las funciones de integración de Fireworks, abra las imágenes desde 
dentro de la ventana de documento. 


Configurar preferencias del editor de imágenes externo 

Puede establecer preferencias para que Dreamweaver inicie automáticamente 
distintas aplicaciones para editar diferentes tipos de imágenes. Por ejemplo, puede 
indicar a Dreamweaver que inicie Fireworks para editar archivos GIF. 

Para configurar un editor de imágenes externo para un tipo de archivo específico: 

1 Elija Edición > Preferencias y seleccione Editores externos. 

2 Haga clic en el botón de signo más (+) situado encima de la lista de extensiones. 

3 Escriba la extensión de nombre de archivo correspondiente al tipo de imagen 
que desea editar (por ejemplo, .gif) o seleccione una de las extensiones 
enumeradas. 

4 Haga clic en el botón de signo más (+) situado encima de la lista de editores. 

5 En el cuadro de diálogo que aparece a continuación, elija la aplicación que 
desea utilizar para editar este tipo de imagen. 

6 Haga clic en Convertir en principal si desea que este editor sea el editor 
principal para este tipo de imágenes. 

Dreamweaver utilizará automáticamente el editor principal cuando decida 
editar una imagen de este tipo. Puede elegir otros editores enumerados en el 
menú contextual de la imagen en la ventana de documento. 

Para cambiar una preferencia existente: 

1 En las preferencias de editores externos, haga clic en la extensión de archivo 
para la que desea cambiar el editor. 

2 Utilice los botones de signo más (+) o menos (-) situados encima de la lista de 
editores para agregar o eliminar un editor. 

Para obtener más información sobre las demás opciones de preferencias de 
Editores externos, consulte “Iniciar un editor de medios externo”, en la 
página 282. 
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Optimizar una imagen en Fireworks 

Si dispone de Fireworks 2 o Fireworks 3, puede utilizar el comando Optimizar 

imagen en Fireworks para optimizar rápidamente las imágenes para la Web. 

Para utilizar el comando Optimizar imagen en Fireworks: 

1 Seleccione una imagen de un documento de Dreamweaver y elija Comandos > 
Optimizar imagen en Fireworks. 

2 Si la imagen seleccionada es un archivo GIF o JPEG, aparecerá un cuadro de 
diálogo en el que se le preguntará si desea utilizar un documento de Fireworks 
existente como origen de la imagen seleccionada. 

• Haga clic en Sí para abrir el archivo PNG original si creó la imagen en 
Fireworks. 

• Haga clic en No si no creó la imagen en Fireworks y continúe con el paso 4. 

3 En el cuadro de diálogo de selección de archivo, desplácese hasta la carpeta que 
contiene el archivo PNG original de Fireworks, selecciónelo y haga clic en 
Aceptar. 

4 En el cuadro de diálogo que aparece a continuación, ajuste el valor de la 
izquierda para cambiar la calidad y el suavizado de un archivo JPEG o la paleta 
y el número de colores de un archivo GIF, o bien para cambiar de un formato 
de archivo a otro. 

Para obtener más información sobre las opciones de este cuadro de diálogo, 
consulte el Usando Fireworks. 

5 El resultado de los ajustes realizados aparece en el panel de Vista previa situado 
a la derecha; el tamaño del archivo y el tiempo de transferencia estimado para la 
imagen se indican en la parte superior del panel de Vista previa. Cuando esté 
satisfecho con la apariencia y el tamaño del archivo de imagen, haga clic en 
Actualizar. 

Si ha cambiado el formato de la imagen, el verificador de vínculos de 
Dreamweaver le pedirá que actualice las referencias a la imagen. Por ejemplo, si 
ha cambiado el formato de una imagen denominada mi_imagen de GIF a 
JPEG, al hacer clic en Aceptar cuando aparezca este mensaje, todas las 
referencias a mi_imagen.gif existentes en el sitio cambiarán a mi_imagen.jpg. 
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Crear una imagen de sustitución 

Una imagen de sustitución es una imagen que cambia cuando el cursor pasa sobre 
ella. Una imagen de sustitución consta en realidad de dos imágenes: la imagen 
principal (la que aparece al cargarse inicialmente la página) y la imagen de 
sustitución (la que aparece al pasar el cursor sobre la imagen principal). Al crear 
una imagen de sustitución, ambas imágenes deben tener el mismo tamaño; si las 
imágenes tienen tamaños distintos, Dreamweaver cambiará automáticamente el 
tamaño de la segunda imagen para que se ajuste a las propiedades de la primera 
imagen. 

Para obtener información sobre cómo cambiar una imagen en respuesta a distintos 
eventos (por ejemplo, un clic del ratón) o sobre cómo cambiar una imagen 
distinta a la que está siendo sustituida, consulte “Intercambiar imagen”, en la 
página 329. 

Para crear una imagen de sustitución: 

1 En la ventana de documento, coloque el punto de inserción en el lugar en el 
que desea que aparezca la imagen de sustitución. 

2 Introduzca la imagen de sustitución mediante uno de estos métodos: 

• Elija Ventana > Objetos para abrir la paleta de objetos y haga clic en el 
botón>Sustitución. 

• Elija Insertar > Imagen de sustitución. 

3 En el cuadro de diálogo que aparece, introduzca la información siguiente: 

• Localice y seleccione una imagen, o bien escriba la ruta de acceso y el nombre 
del archivo de imagen original en el campo Imagen original. 

• Localice y seleccione una imagen de sustitución, o bien escriba la ruta de acceso 
y el nombre del archivo de imagen de sustitución en el campo Imagen de 
sustitución. 

• Para crear un vínculo, localice y seleccione un archivo, o bien sustituya la 
almohadilla (#) del campo Vínculo por una ruta de acceso y un nombre de 
archivo. 

• Para hacer que Dreamweaver cargue previamente las imágenes en la caché del 
explorador, seleccione la opción Carga previa de imágenes. 

4 Haga clic en Aceptar. 
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Para comprobar una imagen de sustitución: 

1 Elija Archivo > Vista previa en el explorador. 

2 En el explorador, desplace el cursor sobre la imagen principal. Deberá verse la 
imagen de sustitución. 

También puede crear una barra de exploración utilizando el comando Insertar > barra 
de exploración. Consulte “Insertar una barra de exploración”, en la página 125. 


Trabajar con archivos HTML de Fireworks 

Dreamweaver facilita el pegado o la importación de código fuente HTML creado 
en Fireworks 3 en documentos de Dreamweaver. Si dispone de Fireworks, podrá 
copiar código HTML directamente al portapapeles en Fireworks y pegarlo en un 
documento de Dreamweaver. Si ha recibido de otro diseñador archivos HTML de 
Fireworks, puede utilizar el objeto Insertar HTML de Fireworks para importar el 
código HTML. 

Nota: También puede importar código fuente HTML creado en Fireworks 2 en un documento 
de Dreamweaver. No obstante, si el documento contiene comportamientos Rollover simple o 
Grupo de intercambio, Dreamweaver no los reconocerá y generará un error 


Pegar HTML de Fireworks 

Si utiliza Fireworks y Dreamweaver de forma simultánea al crear documentos, la 
forma más fácil de insertar HTML de Fireworks en un documento de 
Dreamweaver es copiándolo en el portapapeles. 

Para pegar HTML de Fireworks en un documento de Dreamweaver: 

1 Guarde el documento de Dreamweaver en un sitio definido. 

2 En Fireworks, elija Archivo > Exportar. 

3 En la parte inferior del cuadro de diálogo Exportar, seleccione Dreamweaver 3 
del menú emergente Estilo y Copiar del menú emergente Ubicación. 

4 En la parte superior del cuadro de diálogo Exportar, desplácese hasta una 
ubicación dentro de la carpeta raíz local del sitio de Dreamweaver y haga clic en 
Guardar para guardar el archivo de imagen. 

5 En Dreamweaver, sitúe el punto de inserción en la ventana de documento y 
elija Edición > Pegar. 

La imagen y el código HTML (y JavaScript, en caso de existir) asociado a ella se 
agrega a la ventana de documento de Dreamweaver en los lugares adecuados. 
La imagen aparece en la ventana de documento; para ver el código fuente 
agregado, elija Ventana > Fuente HTML. 
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Insertar HTML de Fireworks 


Si tiene archivos de imágenes y archivos HTML creados en Fireworks 2 o 3, podrá 
importar la imagen y su código fuente HTML asociado con el objeto Insertar 
HTML de Fireworks. 

Para insertar HTML de Fireworks en un documento de Dreamweaver: 

1 Guarde el documento de Dreamweaver en un sitio definido. 

2 Coloque el punto de inserción en la ventana de documento y lleve a cabo una 
de las siguientes operaciones: 

• Haga clic en el botón Insertar HTML de Fireworks en la paleta de objetos. 

• Elija Insertar > Medio > HTML de Fireworks. 

3 En el cuadro de diálogo que aparece a continuación, haga clic en Examinar para 
localizar y seleccionar el archivo HTML de Fireworks. 

Seleccione la opción Eliminar el archivo tras la inserción para mover el archivo 
HTML a la Papelera de reciclaje (Windows) o a la Papelera (Macintosh) 
cuando termine la operación. 

Nota: Si el archivo HTML está en una unidad de red, se borrará de forma irreversible y 
no se moverá a la Papelera de reciclaje o Papelera. 

4 Haga clic en Aceptar. 

La imagen y el código HTML (y JavaScript, en caso de existir) asociado a ella se 
agrega a la ventana de documento de Dreamweaver en los lugares adecuados. 
La imagen aparece en la ventana de documento; para ver el código fuente 
agregado, elija Ventana > Fuente HTML. 


Crear mapas sensibles 

Un mapa de imagen es una imagen que ha sido dividida en regiones o “zonas 
interactivas”; cuando se hace clic en la “zona interactiva”, aparece una página Web. 
Utilice el inspector de imágenes para crear y editar gráficamente mapas sensibles 
del lado del cliente. 

Los mapas sensibles del lado del cliente almacenan la información de hipervínculo 
en el documento HTML, no en un archivo de mapa separado, como hacen los 
mapas sensibles del lado del servidor. Cuando el usuario hace clic en una zona 
interactiva de la imagen, el URL asociado se envía directamente al servidor. Esto 
hace que los mapas sensibles del lado del cliente sean más rápidos que los mapas 
del lado del servidor, pues el servidor no necesita interpretar dónde ha hecho clic 
el usuario. Los mapas sensibles del lado del cliente son compatibles con Netscape 
Navigator 2.0 o posterior, NCSA Mosaic 2.1 y 3.0 y todas las versiones de 
Microsoft Internet Explorer. 
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Dreamweaver no modifica las referencias a mapas sensibles del lado del servidor en 
documentos existentes. Puede utilizar mapas sensibles del lado del cliente y del 
servidor en el mismo documento. Tenga en cuenta que los exploradores que 
admiten ambos tipos de mapas sensibles dan prioridad a los mapas sensibles del 
lado del cliente. Para incluir un mapa de imagen del lado del servidor en un 
documento, deberá escribir el código HTML correspondiente. 

Para crear un mapa de imagen del lado del cliente: 

1 Seleccione la imagen. 

2 Haga clic en la flecha de ampliación, situada en el ángulo inferior derecho del 
inspector de propiedades, para ver todas las propiedades. 

3 Escriba el nombre del mapa en el campo Mapa. 

Nota: Si utiliza múltiples mapas de imágenes en el mismo documento, asegúrese de que 
asigna un nombre exclusivo a cada mapa. 

4 Para definir las áreas de mapas sensibles, lleve a cabo una de estas operaciones: 

• Seleccione la herramienta circular y arrastre el cursor sobre la imagen para crear 
una zona interactiva circular. 

• Seleccione la herramienta de rectángulo y arrastre el cursor sobre la imagen para 
crear una zona interactiva rectangular. 

• Seleccione la herramienta poligonal y defina una zona interactiva con forma 
irregular haciendo clic una vez por cada esquina. Haga clic en la herramienta de 
flecha para cerrar la forma. 

Cuando se selecciona la zona interactiva, aparece el inspector de zonas 
interactivas bajo el inspector de propiedades. Para obtener más información 
sobre el inspector de zonas interactivas, consulte “Configurar propiedades de 
zonas interactivas”, en la página 212. 

5 En el inspector de zonas activas, haga clic en el icono de carpeta para localizar el 
archivo que debe abrirse cuando se haga clic en la zona interactiva, o bien 
escriba el nombre del archivo en el campo Vínculo. 

6 Para hacer que el documento vinculado aparezca en un lugar que no sea la 
ventana o el marco actuales, introduzca un nombre de ventana en el cuadro 
Destino y elija un nombre de marco en el menú. 

Consulte “Crear vínculos”, en la página 114. 

7 En el cuadro Alt, escriba texto alternativo que se mostrará en la zona interactiva 
en los exploradores de sólo texto. 

Algunos exploradores muestran este texto como una descripción de 
herramienta cuando el usuario detiene el ratón sobre la zona interactiva. 

8 Repita los pasos 4 a 7 para definir otras zonas interactivas en el mapa de imagen. 
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Para seleccionar múltiples zonas interactivas en un mapa de imagen: 

Con la imagen seleccionada, lleve a cabo una de estas operaciones: 

• Mantenga pulsada la tecla Mayús mientras hace clic en las otras zonas 
interactivas que desea seleccionar. 

• Pulse Control+A (Windows) o Comando+A (Macintosh). 

Cuando copie una imagen de un documento a otro, las zonas interactivas 
asociadas a dicha imagen también se copiarán. 

Puede utilizar las teclas de flecha o el ratón para mover una o varias zonas 
interactivas a la vez. También puede elegir Modificar > Capas y zonas interactivas 
para alinear las zonas interactivas, traerlas al frente o enviarlas al fondo o hacer que 
tengan la misma altura y anchura. Si hay dos zonas interactivas solapadas, la 
primera zona interactiva será la dominante. 


Configurar propiedades de zonas interactivas 

Las propiedades enumeradas a continuación aparecen en el inspector de 
propiedades cuando se selecciona una zona interactiva. 

Mapa Especifica el nombre del mapa de imagen. Asigne un nombre exclusivo a 
cada mapa de imagen contenido en un documento. 

Vínculo Especifica el archivo o URL que debe mostrarse cuando el usuario hace 
clic en la zona interactiva. Si utiliza un archivo, introduzca una ruta relativa al 
documento. (Los nombres de archivos que comienzan por archivo:// no son 
relativos). 

Destino Especifica el marco o la ventana donde se cargará la página vinculada. La 
opción Destino no se encontrará disponible hasta que la zona interactiva 
seleccionada contenga un vínculo. 

En la lista figuran los nombres de todos los marcos del documento actual. Si el 
marco especificado no existe cuando se abre el documento actual en un 
explorador, la página vinculada se carga en una ventana nueva con el nombre que 
usted haya especificado. También puede seleccionar estos nombres de destino 
reservados: 

• blank Carga el archivo vinculado en una ventana de explorador nueva y sin 
nombre. 

• parent Carga el archivo vinculado en el conjunto de marcos padre o en la ventana 
del marco que contiene el vínculo. Si el marco que contiene el vínculo no está 
anidado, el archivo vinculado se cargará en la ventana completa del explorador. 

• self Carga el archivo vinculado en el mismo marco o ventana que el vínculo. 
Este destino está implícito, por lo que normalmente no es preciso especificarlo. 

• _top Carga el archivo vinculado en la ventana completa del explorador, 
quitando así todos los marcos. 
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Alt Especifica el texto alternativo que aparece en lugar de la imagen en los 
exploradores que sólo admiten texto o en aquéllos configurados para descargar las 
imágenes manualmente. 


Aplicar comportamientos a imágenes 

Puede aplicar cualquier comportamiento disponible a una imagen o zona 
interactiva de imagen. Al aplicar un comportamiento a una zona interactiva, 
Dreamweaver inserta el código fuente HTML en la etiqueta AREA. Existen tres 
comportamientos que están específicamente pensados para las imágenes: Carga 
previa de imágenes, Intercambiar imagen y Restaurar imagen intercambiada. 

Carga previa de imágenes Carga imágenes que no aparecen en la página de 
inmediato (como aquéllas que se intercambiarán por líneas de tiempo, 
comportamientos, capas o secuencias de comandos en JavaScript) en la memoria 
caché del explorador. Esto contribuye a evitar los retrasos debidos a la descarga 
cuando llega el momento de que aparezcan las imágenes. Consulte “Carga previa 
de imágenes”, en la página 321. 

Intercambiar imagen Intercambia una imagen por otra cambiando el atributo SRC 
de la etiqueta IMG. Use esta acción para crear sustituciones de botones y otros 
efectos de imágenes (incluido el intercambio de varias imágenes a la vez). Consulte 
“Intercambiar imagen”, en la página 329. 

Restaurar imagen intercambiada Restaura el último conjunto de imágenes 
intercambiadas a sus archivos de origen anteriores. Esta acción se agrega 
automáticamente siempre que se adjunta la acción Intercambiar imagen a un 
objeto de forma predeterminada; nunca debería ser necesario seleccionarla 
manualmente. Consulte “Restaurar imagen intercambiada”, en la página 330. 

También puede utilizar los comportamientos para crear sistemas de exploración 
más sofisticados, como una barra de exploración o un menú de salto. Consulte 
“Crear barras de exploración”, en la página 124 y “Crear menús de salto”, en la 
página 122. 
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CAPÍTULO 8 

Crear tablas 


Las tablas son una herramienta de diseño Web extremadamente potente para 
presentar datos e imágenes en páginas HTML. Las tablas proporcionan a los 
diseñadores Web formas de agregar estructura vertical y horizontal a una página. 

Las tablas constan de tres componentes básicos: 

• filas (espacio horizontal) 

• columnas (espacio vertical) 

• celdas (los contenedores que se originan en las intersecciones de las filas y las 
columnas). 

Utilice las tablas para presentar datos tabulares, diseñar columnas en una página o 
disponer texto o gráficos en una página Web. Una vez creada una tabla, podrá 
modificar fácilmente tanto la apariencia como la estructura de las tablas HTML. 
Puede agregar contenido; agregar, eliminar, dividir y combinar filas y columnas; 
modificar las propiedades de tabla, de filas o de celdas para agregar color y 
alineaciones; así como copiar y pegar celdas. 

Para aprovechar ideas de diseño más avanzadas, puede introducir una tabla dentro 
de otra, lo que proporciona mayor flexibilidad aún a su diseño. 

Con Dreamweaver, puede convertir fácilmente un diseño de tabla en un diseño de 
capas y viceversa. Tanto las tablas como las capas permiten controlar la ubicación 
de los elementos de la página, aunque las capas no son compatibles con los 
exploradores 3.0 y anteriores. Si el proceso de diseño requiere una rápida 
reubicación del contenido, puede utilizar capas para diseñar una página y, a 
continuación, convertir las capas en una tabla para que se vean en exploradores 
más antiguos. Consulte “Usar capas para diseñar tablas”, en la página 250. 
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Insertar una tabla 

Utilice la paleta de objetos o el menú Insertar para crear una tabla. 

Para insertar una tabla: 

1 Lleve a cabo una de estas operaciones: 

• Sitúe el punto de inserción en el lugar de la ventana de documento en el que 
desea que aparezca la tabla y haga clic en el botón Tabla del panel Común, en 
la paleta de objetos, o elija Insertar > Tabla. 

• Arrastre el botón Tabla desde la paleta de objetos hasta la posición deseada de 
la página. 

Aparecerá el cuadro de diálogo Insertar tabla. 

2 Acepte los valores actuales de este cuadro de diálogo o escriba otros nuevos. 

Nota El cuadro de diálogo Insertar tabla mantiene los valores de la configuración más 
reciente introducida para una tabla. 

• En el campo Filas, especifique el número de filas de la tabla. 

• En el campo Columnas, especifique el número de columnas de la tabla. 

• En el campo Relleno celda, especifica el número de píxeles que habrá entre el 
contenido de la celda y el límite de ésta. 

• En el campo Espacio celda, especifique el número de póteles que debe haber 
entre las celdas de la tabla. 

• En el campo Ancho, especifique el ancho de la tabla como un número de 
póteles o como porcentaje de la ventana del explorador. 

• En el campo Borde, especifique la anchura en póteles del borde de la tabla. 
Introduzca 0 si no desea que la tabla tenga borde. 

3 Haga clic en Aceptar para crear la tabla. 

Si desea insertar una tabla sin especificar previamente estas opciones, desactive la 
opción Mostrar diálogo al insertar objetos en las preferencias generales. Consulte 
“Definir preferencias”, en la página 73. 
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Agregar contenido a una celda de una tabla 

Puede agregar texto e imágenes a las celdas de una tabla. También puede definir las 

propiedades de una imagen que desea insertar en una tabla. 

Para agregar texto a una tabla: 

1 Haga clic en una celda en la que desee agregar texto y realice una de las 
operaciones siguientes: 

• Escriba el texto en la tabla. Las celdas de la tabla aumentarán de tamaño 
automáticamente a medida que escriba. 

• Pegue el texto copiado de otro documento. Utilice el comando Pegar como 
texto para conservar los marcadores de párrafos. Consulte “Agregar texto e 
insertar objetos”, en la página 88. 

2 Pulse la tecla Tab para pasar a la celda siguiente o pulse Mayús+Tab para volver 
a la celda anterior. Si pulsa la tecla Tab en la última celda de una tabla se 
agregará otra fila a la tabla de manera automática. 

También puede usar las teclas de flecha para moverse entre las celdas. 

Para agregar una imagen a una tabla: 

1 Haga clic en la celda en la que desea agregar la imagen. 

2 Haga clic en el botón Insertar imagen del panel Común, en la paleta de objetos, 
o elija Insertar > Imagen. 

3 En el cuadro de diálogo Seleccionar origen de imagen, seleccione un archivo de 
imagen. 

Para obtener información sobre la configuración de las propiedades de imágenes, 

consulte “Configurar propiedades de imagen”, en la página 201. 
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Importar datos de una tabla 

Los datos creados en otra aplicación (como Microsoft Excel) y guardados en un 
formato delimitado (separado por fabuladores, comas, dos puntos, puntos y 
comas u otros delimitadores) pueden importarse a Dreamweaver y volver a 
formatearse como tabla. 

Para importar datos de una tabla: 

1 Lleve a cabo una de estas operaciones: 

• Elija Archivo > Importar > Importar datos de tabla. 

• Elija Insertar > datos tabulares. 

Aparecerá el cuadro de diálogo Importar datos de tabla o Insertar datos 
tabulares, en función de la opción elegida. A excepción de sus títulos, estos dos 
cuadros de diálogo son idénticos. 



2 En el campo Archivo de datos, introduzca el nombre del archivo que desea 
importar. 

3 Del menú desplegable Delimitador, seleccione el formato de delimitador que 
corresponda al formato del documento que va a importar. 

Si selecciona Otro, aparecerá un campo a la derecha del menú desplegable. 
Introduzca el delimitador utilizado para separar los datos de la tabla. 

Nota: Si no selecciona (o especifica) el delimitador utilizado cuando se guardó el archivo, 
el archivo no se importará correctamente y los datos de la tabla tendrán un formato 
incorrecto. No aparecerá ningún error ni ningún mensaje de advertencia para indicarle 
que existe un problema. 
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4 Para Ancho de tabla, seleccione una de las siguientes opciones: 

• Seleccione Ajustar a los datos para crear una tabla que se ajuste al texto más 
largo de cada columna de la tabla. 

• Seleccione Definir para especificar una anchura de tabla como porcentaje de la 
ventana del explorador o como un número de píxeles. 

5 Seleccione las opciones de formato de la tabla: 

• En el campo Relleno celda, especifica el número de píxeles que habrá entre el 
contenido de la celda y el límite de ésta. 

• En el campo Espacio celda, especifique el número de píxeles que debe haber 
entre las celdas de la tabla. 

• En el campo Formatear primera fila, seleccione una de las cuatro opciones de 
formato posibles: Sin formato, Negrita, Cursiva o Negrita cursiva. 

• En el campo Borde, especifique la anchura en píxeles del borde de la tabla. 
Introduzca 0 si no desea que la tabla tenga borde. 

6 Haga clic en Aceptar. 

Seleccionar elementos de tabla 

Con un solo movimiento puede seleccionar toda la tabla, una fila, una columna o 
un rango contiguo de celdas dentro de la tabla. Una vez seleccionadas la tabla o las 
celdas, puede realizar las siguientes operaciones: 

• Modificar la apariencia de las celdas seleccionadas o del texto que contienen. 
Consulte “Aplicar formato a tablas”, en la página 221. 

• Copiar y pegar celdas contiguas. Consulte “Copiar y pegar celdas”, en la 
página 226. 

También puede seleccionar múltiples celdas discontiguas de una tabla y modificar 
las propiedades de dichas celdas. No se pueden copiar ni pegar selecciones de 
celdas discontiguas. 
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Para seleccionar toda la tabla, lleve a cabo una de estas operaciones: 

• Haga clic en la esquina superior izquierda de la tabla o en cualquier punto del 
borde derecho o inferior. 

• Haga clic una vez en la tabla y elija Modificar > Tabla > Seleccionar tabla. 

• Haga clic una vez en la tabla y elija Editar > Seleccionar todo. 

• Sitúe el punto de inserción en cualquier lugar dentro de la tabla y seleccione la 
etiqueta <table> en la esquina inferior izquierda de la ventana de documento. 

Aparecerán manej adores de selección alrededor de la tabla cuando ésta esté 
seleccionada. 



Para seleccionar filas o columnas, lleve a cabo una de estas operaciones: 

• Sitúe el punto de inserción en el margen izquierdo de una fila o en la parte 
superior de una columna. Haga clic cuando aparezca la flecha de selección. 



• Haga clic en una celda o arrastre en horizontal o en vertical para seleccionar 
varias filas o columnas. 

Para seleccionar una o varias celdas, lleve a cabo una de estas operaciones: 

• Haga clic en una celda y arrastre en horizontal o en vertical hasta otra celda. 

• Haga clic en una celda y, a continuación, pulse la tecla Mayús y haga clic en 
otra celda. Todas las celdas de la región rectangular quedarán seleccionadas. 
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Para seleccionar un conjunto de celdas discontiguas, lleve a cabo una de estas 
operaciones: 

• Pulse la tecla Control (Windows) o Comando (Macintosh) y haga clic en la 
tabla para agregar celdas, filas o columnas a la selección. 

• Seleccione varias celdas de la tabla y, a continuación, pulse la tecla Control 
(Windows) o Comando (Macintosh) y haga clic en las celdas, filas o columnas 
para desactivar la selección de celdas individuales. 


Aplicar formato a tablas 

Puede cambiar la apariencia de una tabla configurando las propiedades de la tabla 
y de sus celdas o aplicándole un diseño predefinido. Consulte “Configurar 
propiedades de tabla”, en la página 222, “Configurar propiedades de columnas, 
filas y celdas”, en la página 224 y “Aplicar formato a una tabla con un diseño 
predefinido”, en la página 226. 

Para formatear el texto de la tabla, puede aplicar un formato al texto seleccionado 
o utilizar estilos. Consulte “Aplicar formato al texto”, en la página 177. 


Etiquetas de tablas 

A la hora de aplicar formato a tablas en la ventana de documento, puede definir 
propiedades que se apliquen a toda la tabla o a filas, columnas o celdas 
seleccionadas de la tabla. Cuando una propiedad, como color de fondo o 
alineación, se define de una forma para toda la tabla y de otra para celdas 
individuales de la misma, resulta útil comprender cómo Dreamweaver interpreta 
el código fuente HTML. 

Cuando se define la misma propiedad varias veces en una tabla, se interpreta de 
esta forma: El formato de celdas, que forma parte de la etiqueta TD tiene prioridad 
sobre el formato de filas (etiqueta TR), que a su vez tiene prioridad sobre el formato 
de tablas (etiqueta TABLE). Por tanto, si especifica un color de fondo azul para una 
sola celda y, a continuación, establece el color de fondo de toda la tabla como 
amarillo, la celda azul no cambiará a amarillo, ya que la etiqueta TD tiene prioridad 
sobre la etiqueta TABLE . 
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En el ejemplo siguiente, la etiqueta TABLE establece un color de fondo amarillo 
(#FFFF99) para toda la tabla. La primera etiqueta, TR, cambiará esas celdas a verde 
(#33FF66) y la segunda etiqueta, TD, cambiará la celda superior central a azul 
(#333399). Las etiquetas TR y TD de la fila inferior no han cambiado, por lo que 
esas celdas adoptan el color de la tabla, que es amarillo. 

<TABLE BORDER="1" WIDTH = M 75%" BGCOLOR="#FFFF99"> 

<TR BGCOLOR="#33FF66"> 

<TD>&nbsp;</TD> 

<TD BGCOLOR="#333399">&nbsp;</FD> 

<TD>&nbsp;</TD> 

</TR> 

<TR> 

<TD>&nbsp;</TD> 

<TD>&nbsp;</TD> 

<TD>&nbsp;</TD> 

</TR> 

</FABLE> 

Configurar propiedades de tabla 

El inspector de propiedades muestra las propiedades de tabla cuando hay una tabla 
seleccionada. 

También puede utilizar el comando Formatear tabla para aplicar rápidamente un 
diseño predefinido a la tabla seleccionada. Consulte “Aplicar formato a una tabla 
con un diseño predefinido”, en la página 226. 


Para especificar propiedades de tabla: 

1 Seleccione la tabla. 

2 Elija Ventana > Propiedades para abrir el inspector de propiedades. Haga clic en 
la flecha de ampliación, situada en la esquina inferior derecha, para ver todas las 
propiedades. 



Para asignar un nombre a la tabla: 

• En el campo Tabla, introduzca un nombre para la tabla. 
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Para seleccionar opciones de diseño de tabla: 

• En los campos Filas y Cois, especifique el número de filas y columnas de 
la tabla. 

• En los campos An y Al, especifique la anchura y la altura de la tabla como un 
número de píxeles o como porcentaje de la ventana del explorador. 
Normalmente no es preciso especificar la altura de una tabla. 

• Utilice el campo Alinear para especificar cómo debe alinearse una tabla con 
otros elementos del mismo párrafo, como pueden ser texto o imágenes. 
Izquierda alinea la tabla a la izquierda de otros elementos, Derecha alinea la 
tabla a la derecha de otros elementos y Centro centra la tabla. Puede alinear la 
tabla a la izquierda, a la derecha o al centro en relación con otros elementos. 
También puede elegir la alineación predeterminada del explorador. 

• En los campos Espacio V y Espacio H, especifique el número de píxeles de 
espacio en blanco que habrá por encima y por debajo, así como a los lados de la 
tabla. 

• Utilice los botones Borrar alto de fila y Borrar ancho de columna para borrar 
todos los valores de altura de fila y anchura de columna de la tabla. 

• Utilice el botón Convertir ancho de tabla a píxeles para convertir la anchura de 
la tabla expresada en forma de porcentaje de la ventana del explorador a su 
anchura actual expresada en píxeles. 

• Utilice el botón Convertir ancho de tabla a porcentaje para convertir la anchura 
de la tabla expresada en píxeles a un porcentaje de la ventana del explorador. 

Para establecer el diseño de las celdas, elija entre las siguientes opciones: 

• En el campo Rell. celda, especifique el número de píxeles que habrá entre el 
contenido de la celda y el límite de ésta. 

• En el campo Esp. celda, especifique el número de píxeles que debe haber entre 
las celdas de la tabla. 

Cuando no se asignan valores específicos de espaciado y relleno de celda, Netscape 

Navigator, Microsoft Internet Explorer y Dreamweaver muestran la tabla como si 

el espaciado de celda fuera 2 y el relleno de celda fuera 1. 
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Para configurar los bordes de la tabla, elija entre las siguientes opciones: 

• En el campo Borde, especifique la anchura del borde de la tabla en píxeles. La 
mayoría de los exploradores muestran el borde como una línea tridimensional. 

Si utiliza la tabla para el diseño de la página, especifique 0 como valor de borde. 
Para ver los límites de celda y tabla cuando el borde está definido como 0, elija 
Ver > Bordes de tabla. 

• Utilice los campos Borde claro y Borde oscuro para seleccionar los colores de 
borde que tienen un efecto de resaltado y sombra, respectivamente, para dar 
apariencia tridimensional al borde. (Para restablecer las sombras grises 
predeterminadas, elimine los valores de color y deje los campos en blanco.) 

• Utilice el campo Borde para seleccionar un color de borde para toda la tabla. 

• Utilice las opciones Fnd para establecer la imagen de fondo o el color de fondo 
de la tabla. 

Configurar propiedades de columnas, filas y celdas 

Seleccione cualquier combinación de celdas y, a continuación, utilice el inspector 

de propiedades para cambiar la apariencia de celdas, filas o columnas individuales. 

Para seleccionar celdas, filas y columnas, consulte “Seleccionar elementos de 

tabla”, en la página 219. Para aplicar formato a toda la tabla, consulte “Configurar 

propiedades de tabla”, en la página 222. 

Para aplicar formato a una fila, una columna o una celda: 

1 Seleccione cualquier combinación de celdas de la tabla. 

2 Elija Ventana > Propiedades para abrir el inspector de propiedades y haga clic 
en la flecha de ampliación que se encuentra en la esquina inferior derecha para 
ver todas las propiedades. 
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3 Dispone de las siguientes opciones de apariencia: 

• Utilice el menú emergente Horiz para configurar la alineación horizontal del 
contenido de una celda, una columna o una fila. Puede alinear el contenido a la 
izquierda, a la derecha o al centro, o bien con el valor predeterminado del 
explorador (generalmente a la izquierda para celdas normales y centro para 
celdas de encabezado). 

• Utilice el menú emergente Vert para configurar la alineación vertical del 
contenido de una celda, una columna o una fila. Puede alinear el contenido con 
la parte superior, media, inferior, con la línea de base o con el valor 
predeterminado del explorador (generalmente alineación al medio). 

• En los campos An y Al, especifique en píxeles la anchura y la altura de las celdas 
seleccionadas. Para usar porcentajes, introduzca el símbolo de porcentaje (%) 
tras el valor. 

• Para definir una imagen de fondo para una celda, columna o fila, utilice el 
campo Fnd. Haga clic en el icono de carpeta para localizar una imagen; 
también puede escribir la ruta de la imagen o utilizar el icono de señalización. 

• Para definir el color de fondo para una celda, columna o fila, utilice el campo 
Fnd. Puede utilizar el selector de colores o escribir el código hexadecimal 
correspondiente al color deseado. 

• Para establecer un color de borde para las celdas, utilice la opción Borde. 

4 Dispone de las siguientes opciones de diseño: 

• Haga clic en el botón Combinar celdas para combinar las celdas, filas o 
columnas seleccionadas y crear una celda. Consulte “Dividir y combinar 
celdas”, en la página 231. 

• Haga clic en el botón Dividir celda para dividir una celda y convertirla en dos 
celdas. Consulte “Dividir y combinar celdas”, en la página 231. 

• Seleccione No aj. para impedir que se ajuste el texto. Esto hace que las celdas 
sean más anchas para dar cabida a todos los datos conforme los escribe o los 
pega en una celda. (Generalmente, las celdas se amplían en horizontal para dar 
cabida a la palabra más larga y, a continuación, se amplían en vertical.) 

• Seleccione Encab. para aplicar formato de encabezado de tabla a las celdas o 
filas seleccionadas. El contenido de las celdas de encabezado de la tabla aparece 
en negrita y centrado de forma predeterminada. 
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Aplicar formato a una tabla con un diseño predefinido 

Utilice el comando Formatear tabla para aplicar rápidamente un diseño 

predefinido a la tabla. Seguidamente, podrá seleccionar opciones para adaptar aún 

más el diseño. 

Para utilizar un diseño predefinido: 

1 Seleccione la tabla y elija Comandos > Formatear tabla. 

2 En el cuadro de diálogo que aparece, elija un esquema de diseño en la lista de la 
izquierda. La tabla se actualizará para presentar una muestra del diseño. 

3 Para personalizar el diseño, realice cambios en las opciones Colores de las filas, 
Primera fila y Col. izquierda. 

4 Para modificar la anchura del borde, introduzca un valor en el campo Borde. 
Introduzca 0 si no desea que la tabla tenga borde. 

5 Para aplicar el diseño a las celdas de la tabla (etiquetas TD) en lugar de a las filas 
(etiquetas TR), seleccione la opción Aplicar atributos a etiquetas TD, no a 
etiquetas TR. 

El formato aplicado a las celdas de la tabla tendrá prioridad sobre el formato 
aplicado a las filas. Sin embargo, el formato aplicado a las filas producirá un 
código fuente HTML más limpio y conciso. Consulte “Aplicar formato a 
tablas”, en la página 221. 

6 Haga clic en Aplicar o en Aceptar para dar formato a la tabla con el diseño 
seleccionado. 


Copiar y pegar celdas 

Puede copiar y pegar al mismo tiempo varias celdas de una tabla conservando su 
formato o copiar y pegar únicamente el contenido de la celda. 

Las celdas se pueden pegar en un punto de inserción o en el lugar de una selección 
en una tabla existente. Para pegar varias celdas de una tabla, el contenido del 
Portapapeles debe ser compatible con la estructura de la tabla o la selección de la 
tabla en la que se va a pegar. 
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Para cortar o copiar celdas en una tabla: 

1 Seleccione una o más celdas de la tabla. 

Para cortar o copiar celdas, la selección debe tener forma rectangular. (Consulte 
“Seleccionar elementos de tabla”, en la página 219.) 


when what 

where 

3pm 9pm Festival Featuring the Sonoma Strings 

California, Sonoma 

10.0158 Pear Canning Oemonstration 

llam-lpm 

Bend, Oregon 

10 0858 

_ ' . Benefit for Southwest Chamber Ensemble 

7pm -spm 

Scottsdale, Arizora 


Selección correcta: Las celdas se pueden cortar o copiar. 


when 

what 

where 

09.2558 

3pm-9pm 

Honey Festival Featuring the Sonoma Strings 

California, Sonoma 

10.0158 

llam-lpm 

Pear Canning Oemonstration 

Bend. Oregon 

10.0858 

7pm-9pm 

Benefit for Southwest Chamber Ensemble 

Scottsdale, Arizona 


Selección incorrecta: Estas celdas no se pueden cortar ni copiar. 


2 Corte o copie las celdas utilizando los comandos del menú Edición. 

Si selecciona toda una fila o columna y elige Edición > Cortar, la fila o la 
columna desaparecerán de la tabla. 

Para pegar celdas de tabla: 

1 Elija dónde desea pegar las celdas. 

• Para pegar celdas antes o encima de una celda concreta, haga clic en dicha 
celda. 

• Para crear una tabla nueva con las celdas pegadas, haga clic en el lugar en el que 
desea que aparezca la tabla (siempre que no sea dentro de otra tabla). 

2 Elija Edición > Pegar. 

Si pega filas o columnas completas en una tabla existente, éstas se agregarán a la 
tabla. Si pega una celda individual, se reemplazará el contenido de la celda 
seleccionada, siempre que el contenido del Portapapeles sea compatible con 
dicha celda. Si pega fuera de una tabla, las filas, columnas o celdas se utilizarán 
para definir una tabla nueva. 
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Para eliminar el contenido y dejar las celdas intactas: 

1 Seleccione una o más celdas. 

2 Elija Edición > Borrar o pulse Supr. 

Nota: Si selecciona todas las celdas de una fila o una columna, la fila o la columna (no sólo 
su contenido) se eliminarán de la tabla. 

Para copiar y pegar el contenido de celdas: 

1 Seleccione el texto y elija Edición > Copiar sólo texto. 

Sólo se copiará en el Portapapeles el texto de las celdas seleccionadas. 

2 Haga clic en una celda o en otro lugar de la ventana de documento y elija 
Edición > Pegar como texto. 

No se puede pegar la selección en una selección de varias celdas. 


Cambiar el tamaño de tablas y celdas 

Puede cambiar el tamaño de una tabla completa o de filas y columnas 

individuales. Al cambiar el tamaño de toda la tabla, todas sus celdas cambiarán 

proporcionalmente. 

Para cambiar el tamaño de la tabla: 

1 Seleccione la tabla. 

2 Arrastre uno de los manejadores de selección para cambiar el tamaño de la tabla 
en esa dimensión. Al arrastrar el manejador de la esquina se cambian ambas 
dimensiones. 

Para cambiar el tamaño de una fila o una columna, lleve a cabo una de estas 

operaciones: 

• Para cambiar la altura de la fila, arrastre el borde inferior de la fila. 

• Para cambiar la anchura de la columna, arrastre el borde derecho de la 
columna. 
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Cambiar la anchura de una columna 


El inspector de propiedades permite especificar la anchura de una columna de tres 
formas distintas. 


Para establecer la anchura de la columna: 

1 Haga clic en una de las celdas de la columna o seleccione la columna. 

2 Elija Ventana > Propiedades para abrir el inspector de propiedades. 

3 En el campo An, lleve a cabo una de estas operaciones: 

• Introduzca un número para establecer la anchura de la columna de acuerdo con 
el valor especificado en píxeles. 

• Introduzca un número seguido de un símbolo de porcentaje (%) para establecer 
la columna como porcentaje de la anchura de la tabla. 

• Deje el campo en blanco (predeterminado) para permitir que el explorador y 
Dreamweaver determinen la anchura adecuada de acuerdo con el contenido de 
la celda y la anchura de las otras columnas. Generalmente se asigna espacio de 
acuerdo con la línea más larga o la imagen más ancha. Por esta razón algunas 
veces una columna resulta mucho más grande que otras columnas de la tabla 
cuando se le agrega contenido. 

Borrar la anchura de una columna y la altura de una fila 

La forma más sencilla de establecer la anchura de una columna y la altura de una 
fila consiste en arrastrar los bordes de la tabla. Al arrastrar el borde de una 
columna o una fila se establecen automáticamente valores específicos para todas las 
columnas o filas, en píxeles o como porcentaje de las dimensiones actuales de la 
tabla, según se haya especificado la anchura de la tabla. 

Si no consigue el resultado deseado arrastrando los bordes de la tabla, puede borrar 
la anchura de la columna y volver a empezar. 


Para cambiar la anchura y la altura, lleve a cabo una de estas operaciones: 

• Seleccione la tabla, elija Modificar > Tabla, y seleccione Borrar alto de celda o 
Borrar ancho de celda. 

• Elija Ventana > HTML y cambie la anchura y la altura directamente en el 
inspector de código Fuente HTML. 

• En el inspector de propiedades, introduzca los valores específicos de anchura y 
altura en los cuadros An y Al. 
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Agregar y eliminar filas y columnas 

Utilice los comandos del submenú Modificar > Tabla o los comandos del menú 
contextual para agregar y eliminar filas y columnas de una tabla. 

Para agregar filas o columnas: 

1 Haga clic en una celda donde desea que aparezca la nueva fila o columna. 

2 Lleve a cabo una de estas operaciones: 

• Para agregar una fila, elija Modificar > Tabla > Insertar fila o elija Tabla > 
Insertar fila en el menú contextual. 

• Para agregar una columna, elija Modificar > Tabla > Insertar columna o elija 
Tabla > Insertar columna en el menú contextual. 

• Para agregar filas y columnas, elija Modificar > Tabla > Insertar filas 

o columnas, o elija Tabla > Insertar filas o columnas en el menú contextual. 

3 En el cuadro de diálogo que aparece a continuación, introduzca el número de 
filas o columnas que desea agregar y especifique si las nuevas filas o columnas 
deben aparecer antes o después de la fila o columna seleccionada. 

4 Haga clic en Aceptar. 

Para eliminar una fila o una columna: 

1 Haga clic en una celda de la fila o la columna que desea eliminar. 

2 Elija una de las siguientes opciones: 

• Para eliminar una fila, elija Modificar > Tabla > Eliminar fila o elija Tabla > 
Eliminar fila en el menú contextual. 

• Para eliminar una columna, elija Modificar > Tabla > Eliminar columna o elija 
Tabla > Eliminar columna en el menú contextual. 

Para agregar o eliminar filas o columnas de las partes Inferior y derecha de una 
tabla: 

1 Seleccione toda la tabla. (Haga clic en la esquina superior izquierda de la tabla, o 
bien haga clic una vez en la tabla y elija Modificar > Tabla > Seleccionar tabla.) 

2 En el inspector de propiedades, lleve a cabo una de estas operaciones: 

• Aumente el valor de fila o columna para agregar filas. 

• Reduzca el valor de fila o columna para eliminar filas. 

Dreamweaver agrega o elimina filas desde la parte inferior de la tabla y agrega y 
elimina columnas a la derecha. Dreamweaver no advierte si las filas o las 
columnas que desea eliminar contienen datos. 
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Anidar tablas 


Una tabla anidada es una tabla que está dentro de otra tabla. Puede configurar una 
tabla anidada como cualquier otra tabla; no obstante, su ancho vendrá limitado 
por el ancho de la celda en la que aparece. 



Para anidar una tabla en una celda de otra tabla: 

1 Lleve a cabo una de estas operaciones: 

• Haga clic en la celda donde desea que aparezca la segunda tabla y elija Insertar 
> Tabla. 

• Haga clic en la celda donde desea insertar la segunda tabla y, a continuación, 
haga clic en el botón Tabla del panel Común, en la paleta de objetos. 

• Arrastre el botón Tabla del panel Común, en la paleta de objetos, hasta la celda 
donde desea insertar la segunda tabla. 

2 Especifique las propiedades de la tabla en el cuadro de diálogo Insertar tabla y 
haga clic en Aceptar. 


Dividir y combinar celdas 

Utilice el inspector de propiedades o los comandos del submenú Modificar > 
Tabla para dividir o combinar celdas. Puede combinar cualquier número de celdas 
adyacentes -siempre que la selección entera tenga forma rectangular- para obtener 
una sola celda que se extienda por varias columnas o filas. Puede dividir una celda 
en varias filas o columnas, independientemente de si anteriormente se había 
combinado. Dreamweaver reestructura automáticamente la tabla (agrega los 
correspondientes atributos COLSPAN o ROWSPAN) para crear la disposición 
especificada. 

En la ilustración siguiente, las celdas en la mitad de las dos primeras columnas se 
han combinado para ocupar dos filas. 




i 1 





1 1 


Crear tablas 231 










































Para combinar dos o más celdas en una tabla: 

1 Seleccione las celdas que desea combinar. 

Las celdas seleccionadas deberán ser contiguas y tener forma rectangidar. 


when 

what 

where 

09.26.9S 

3pm -9pm 

Honey Festival Featuring the Sonoma Strings 

California, Sonoma 

10.01.98 
llam .Ipm 

Pear Cannlng Demonstraron 

Bend, Oregon 

10.08.98 

7pm -9pm 

Benefitfor Southwest Chamber Ensemble 

Scottsdale, Arizona 

10.3088 

8pm -lOpm 

Candlelight Walk through the Orchards 

Monterey, California 


Esta selección tiene forma rectangular, por lo que las celdas se pueden combinar. 


when 

what 

where 

0986.98 

3pm -9pm 

Honey Festival Featuring the Sonoma Strings 

California, Sonoma 

10.01.98 
llam -Ipm 

Pear Cannlng Demonstration 

Bend, Oregon 

10.08.98 

7pm -9pm 

Benefitfor Southwest Chamber Ensemble 

Scottsdale, Arizona 

10.3088 

8pm - lOpm 

Candlelight Walk through the Orchards 

Monterey, California 


Esta selección de tabla no tiene forma rectangidar, por lo que las celdas no se pueden 
combinar. 


2 Elija Modificar > Tabla > Combinar celdas o haga clic en el botón Combinar 
celdas del inspector de propiedades. 

El contenido de las celdas individuales se sitúa en la celda combinada 
resultante. Las propiedades de la primera celda seleccionada se aplicarán a la 
celda combinada. 

Para dividir una celda combinada: 

1 Haga clic en la celda o seleccione una celda. 

2 Elija Modificar > Tabla > Dividir celdas o haga clic en el botón Dividir celdas 
del inspector de propiedades. 

3 En el cuadro de diálogo Dividir celda, elija si desea dividir la celda en filas o en 
columnas y, a continuación, introduzca el número de filas o columnas. 
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Ordenar tablas 


Puede ordenar una tabla de una manera sencilla de acuerdo con el contenido de 
una columna. También puede realizar una operación más compleja ordenándola 
de acuerdo con el contenido de dos columnas. 

No se pueden ordenar tablas que contengan atributos COLSPAN o ROWSPAN es 
decir, tablas con celdas combinadas. (Para más detalles sobre las celdas 
combinadas, consulte “Dividir y combinar celdas”, en la página 231.) 

Para ordenar una tabla: 

1 Seleccione la tabla y elija Comandos > Ordenar tabla. 

2 En el cuadro de diálogo que aparece dispone de las siguientes opciones: 

• Seleccione la columna que desea ordenar en la opción Ordenar por. 

• Seleccione si desea ordenar la columna alfabéticamente o numéricamente en la 
opción Orden. 

Esta opción resulta importante cuando el contenido de una columna es 
numérico. Una clasificación alfanumérica aplicada a una lista de números de 
uno y dos dígitos generará un orden alfanumérico (como 1, 10, 2, 20, 3, 30) en 
lugar de un orden estrictamente numérico (como 1, 2, 3, 10, 20, 30). 

• Seleccione Orden ascendente (de la A a la Z o de bajo a alto) u Orden 
descendente como orden de clasificación. 

3 Para realizar una clasificación secundaria en otra columna, especifique las 
opciones de orden en el menú emergente Después por. 

4 Seleccione la opción El orden incluye la primera fila para incluir la primera fila 
en el orden. Si la primera fila contiene un encabezado que no se debe mover, 
deje esta opción sin seleccionar. 

5 Haga clic en Aplicar o en Aceptar para ordenar la tabla. 
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Exportar datos de tabla 

Para exportar datos creados en Dreamweaver, deberá guardarlos en un formato de 
archivo que acepte los datos delimitados. Los delimitadores que puede utilizar son 
las comas, los dos puntos, los puntos y comas o los espacios. 

No se pueden seleccionar partes de una tabla para su exportación; al exportar una 
tabla, ésta se exporta entera. Si desea exportar algunos datos concretos de una tabla 
(por ejemplo, las primeras seis filas o las primeras seis columnas), copie la 
información en una nueva tabla y expórtela. 

Para exportar una tabla: 

1 Sitúe el punto de inserción en cualquier celda de la tabla que va a exportar. 

2 Elija Archivo > Exportar > Exportar tabla. 

Aparecerá el cuadro de diálogo Exportar tabla. 



3 En el menú emergente Delimitador, seleccione un valor de delimitador para los 
datos de la tabla. 

4 En el menú emergente Saltos de línea, seleccione los saltos de línea para el 
sistema operativo al que va a exportar el archivo (Windows, Macintosh o MS- 
DOS). 

5 Haga clic en Exportar. 

6 En el cuadro de diálogo que aparece, asigne un nombre al archivo y haga clic en 
Guardar. 
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CAPÍTULO 9 

Usar capas 


Una capa es un contenedor de HTML que generalmente traza la etiqueta DIV o 
SPAN y que puede colocar en cualquier lugar de la página. Las capas pueden 
contener texto, imágenes, formularios, objetos plug-ins e incluso otras capas (una 
capa puede contener cualquier cosa que se pueda colocar en el cuerpo de un 
documento HTML). 

Las capas proporcionan a los diseñadores de páginas Web un control exhaustivo 
que les permite colocar los elementos en píxeles exactos. Al colocar elementos de 
página en capas, podrá controlar los objetos que deben aparecer delante y los que 
deben encontrarse desplazados u ocultos. También puede utilizar una línea de 
tiempo para mover una o varias capas simultáneamente por una pantalla. 

En Dreamweaver, puede utilizar dos formatos de capa para situar el contenido de 
una página. Capas CSS y capas Netscape. 

• Las capas CSS (también denominadas elementos CSS-P) sitúan el contenido en 
una página mediante las etiquetas DIV y SPAN. Las propiedades de las capas CSS 
se definen en el documento del World Wide Web Consortium sobre colocación 
de elementos HTML con hojas de estilos en cascada (Positioning HTML 
Elements with Cascading Style Sheets). 

• Las capas Netscape sitúan el contenido en la página utilizando las etiquetas 
LAYER e ILAYER de Netscape. Las propiedades de las capas Netscape están 
definidas por el formato de capas propio de Netscape. 

Microsoft Internet Explorer 4.0 y Netscape Navigator 4.0 admiten las capas 
creadas utilizando las etiquetas DIV y SPAN . Sólo Navigator admite las capas 
creadas con las etiquetas LAYER e ILAYER . Las versiones anteriores de ambos 
exploradores muestran el contenido de la capa, pero no lo colocan. 
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Las propiedades de colocación para capas son: izquierda y superior (coordenadas x 
ey, respectivamente), índice z (también denominado orden de apilamiento) y 
visibilidad. Los elementos colocados se pueden definir con las etiquetas DIV, SPAN, 
LAYER e ILAYER en Dreamweaver. Consulte “Configurar preferencias de capa”, en la 
página 239. 


Crear capas 

Cree capas mediante técnicas de inserción, arrastrar y soltar o dibujo. Una vez 
creada una capa, use la paleta de Capas para seleccionarla, anídela dentro de otra 
capa o cambie su orden de apilamiento. Consulte “Paleta de capas”, en la 
página 237. 

Las propiedades predeterminadas de la capa (etiqueta, visibilidad, alto y ancho, 
etcétera) se especifican en las preferencias de Capa. Para cambiar la configuración 
predeterminada, elija Edición > Preferencias y seleccione Capas. Consulte 
“Configurar preferencias de capa”, en la página 239. 

De forma predeterminada, Dreamweaver crea capas con la etiqueta DIV e inserta 
código de capa en el punto de inserción, o bien, si se están dibujando capas, en la 
parte superior de la página, inmediatamente después de la etiqueta BODY. Si se crea 
una capa anidada, Dreamweaver inserta el código dentro de la etiqueta que define 
la capa padre. 

Al crear capas, para evitar el solapamiento de unas capas con otras, active la opción 
Evitar solapamiento en la paleta de capas o elija Ver > Evitar solapamiento de 
capas. Consulte “Evitar solapamiento de capas”, en la página 251. 


Para crear una capa, lleve a cabo una de estas operaciones: 

• Para insertar una capa, coloque el punto de inserción en la ventana de 
documento en la que desea colocar la capa y luego elija Insertar > Capa. 

• Para arrastrar y soltar una capa, arrastre el botón Capa de la paleta de objetos a 
la ventana de documento. 

• Para dibujar una capa, haga clic en el botón Capa de la paleta de objetos; en la 
ventana de documento, arrastre para dibujar la capa. 
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• Para dibujar varias capas, haga clic en el botón Capa de la paleta de objetos, 
mantenga pulsada la tecla Mayús y dibuje una capa en la ventana de 
documento. Podrá continuar dibujando nuevas capas mientras no suelte la tecla 
Mayús. 

Por cada capa que cree, aparecerá una marca de capa en la parte superior 
izquierda de la página en la ventana de documento. Las marcas de capas 
aparecerán en otras posiciones de la página si agrega capas tras agregar retornos 
de párrafo a la ventana de documento. 

Si no se ven las marcas de capas, elija Ver > Elementos invisibles. Consulte 
“Configurar preferencias de elementos invisibles”, en la página 92. Cuando esté 
viendo elementos invisibles, puede que otros elementos de la página aparezcan 
en posiciones desplazadas. Los elementos invisibles sólo son visibles en la 
ventana de documento; cuando se ve la página en un explorador, los demás 
elementos aparecerán en su posición correcta. 


Paleta de capas 

La paleta de capas es un mapa visual de las capas de un documento. Elija 
Ventana > Capas o pulse F11 para abrir la paleta de capas. Las capas se muestran 
en forma de lista apilada de nombres; la primera capa que se creó estará situada al 
final de la lista, mientras que la última que se creó aparecerá en la primera posición 
de la lista. Las capas anidadas se muestran como nombres relacionados con las 
capas padres. Haga clic en la flecha de ampliación para mostrar u ocultar las capas 
anidadas. 

Use la paleta de capas para evitar solapamientos, cambiar la visibilidad de las 
capas, anidar o apilar capas y para seleccionar una o más capas. 

• Para anidar una capa dentro de otra, consulte “Anidar capas”, en la página 238. 

• Para seleccionar una o más capas, consulte “Trabajar con capas”, en la 
página 243. 

• Para cambiar el orden de apilamiento de una capa, consulte “Cambiar el orden 
de apilamiento de las capas”, en la página 248. 

• Para cambiar la visibilidad de una capa, consulte “Cambiar la visibilidad de una 
capa”, en la página 249. 

• Para evitar el solapamiento de unas capas con otras, consulte “Evitar 
solapamiento de capas”, en la página 251. 
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Anidar capas 

Una capa anidada es aquella que se ha creado dentro de otra capa. Use la paleta de 
capas o la técnica de inserción, arrastrar y soltar o dibujar, para crear capas 
anidadas. 

La anidación permite agrupar capas. Una capa anidada se mueve con su capa 
padre, de la que hereda su visibilidad. Las capas de Netscape creadas con las 
etiquetas LAYER e ILAYER se expanden para incluir el ancho y el alto de su capa hija. 

A continuación, se incluye un ejemplo de código HTML de una capa anidada: 

<d¡v ¡d = "Parent" style=“p° s ¡t¡on:absolute; left:56px; top:54px; w¡dth:124px; height: 158px; 
z-¡ndex:1 ;"> 

Contenido situado en el interior de la capa padre. 

<div ¡d = "Nested" style="pos¡tion:absolute; left:97px; top: 114px; width:54px; height:69px; 
z-index:1 ;"> 

Contenido situado en el interior de la capa anidada. 

</div> 

</div> 

Al dibujar capas, use las preferencias de Capa para que una capa que se ha creado 
dentro de otra sea una capa anidada. Elija Edición > Preferencias, seleccione Capas 
y haga clic en la casilla de verificación Anidar. Consulte “Configurar preferencias 
de capa”, en la página 239. 


Para crear una capa anidada, siga uno de estos procedimientos: 

• Para insertar una capa anidada, coloque el punto de inserción dentro de una 
capa existente y elija Insertar > Capa. 

• Para arrastrar y soltar una capa anidada, arrastre el botón Capa de la paleta de 
objetos y, seguidamente, suéltelo dentro de una capa existente. 

• Para dibujar una capa anidada, haga clic en el botón Capa de la paleta de 
objetos; después, dentro de la capa existente, arrastre para dibujar la capa 
anidada. Si Anidar está desactivado en las preferencias de capas, pulse Control 
(Windows) o Comando (Macintosh) para dibujar una capa dentro de otra capa 
existente. 

Para crear una capa anidada mediante la paleta de capas: 

1 Elija Ventana > Capas o pulse F11 para abrir la paleta de capas. 

2 Pulse la tecla Control (Windows) o la tecla Comando (Macintosh), seleccione 
una capa en la paleta de capas y arrástrela hasta la capa de destino. 

3 Suelte el botón del ratón cuando aparezca un cuadro alrededor del nombre de 
la capa de destino. 
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Configurar preferencias de capa 

Use las preferencias de Capas para definir la configuración predeterminada de las 
capas nuevas. Elija Edición > Preferencias y luego haga clic en Capas para cambiar 
las preferencias de capa. 

Etiqueta Indica la etiqueta predeterminada que se usó para definir la capa. SPAN y 
DIV crean capas CSS; LAYER e ILAYER crean capas Netscape. 

Visibilidad Determina si las capas serán visibles como opción predeterminada. 

Ancho y Alto Establecen la anchura y la altura predeterminadas de las capas 
creadas mediante Insertar > Capa. 

Color de fondo Determina el color de fondo predeterminado. 

Imagen de fondo Especifica una imagen de fondo predeterminada. 

Anidar Convierte una capa dibujada dentro de los límites de una capa existente en 
una capa anidada. Pulse Control (Windows) o Comando (Macintosh) para 
cambiar esta configuración temporalmente mientras se dibuja una capa. 

Compatibilidad con Netscape 4 Inserta código JavaScript en la sección HEAD de 
un documento y soluciona el cambio de tamaño de las capas CSS de Netscape en 
un explorador. También puede agregar o eliminar el código JavaScript eligiendo 
Comandos > Agregar/Quitar reparación de cambio de tamaño de Netscape. 

Configurar propiedades de capa 

Use el inspector de propiedades para especificar el nombre y la ubicación de una 
capa, así como para establecer otras opciones de las capas. Para ver todas las 
propiedades siguientes, haga clic en la flecha de ampliación que se encuentra en el 
ángulo inferior derecho del inspector de propiedades. 

ID de capa Permite especificar un nombre para identificar la capa en la paleta de 
capas y en las secuencias de comandos. Introduzca un nombre en el cuadro sin 
título que aparece a la izquierda en el inspector de propiedades. Use solamente 
caracteres alfanuméricos estándar para el nombre de las capas. No utilice caracteres 
especiales como espacios, guiones, barras ni puntos. 

Iz y Sup Especifican la posición de la capa con respecto al ángulo superior 
izquierdo de la página o capa padre. 

An y Al Especifican la anchura y la altura de la capa. Si el contenido de la capa 
excede del tamaño especificado, estos valores son anulados. 

Para capas CSS, los valores predeterminados de ubicación y tamaño se expresan en 
píxeles (px). También se pueden emplear las siguientes unidades: pe (picas), pt 
(puntos), in (pulgadas), mm (milímetros), cm (centímetros) o % (porcentaje del 
valor padre). Las abreviaturas deben seguir al valor sin espacio de separación: por 
ejemplo: 3mm. El parámetro Desbordamiento controla el modo en que 
reaccionan las capas CSS cuando el contenido excede el tamaño de la capa. 
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índice Z Determina el índice z, u orden de apilamiento, de la capa. Las capas con 
los números más altos aparecerán por encima de las capas con los números más 
bajos. Los valores pueden ser positivos o negativos. Resulta más sencillo cambiar el 
orden de apilamiento de las capas mediante la paleta de capas que introduciendo 
valores de índice z específicos. Consulte “Cambiar el orden de apilamiento de las 
capas”, en la página 248. 

Las capas Netscape (aquellas con las etiquetas AYER o IAYER) también se pueden 
apilar con relación a otras capas de la página. Cuando se selecciona una capa 
Netscape, aparecen dos opciones adicionales en el ángulo inferior derecho del 
inspector de propiedades. Use la opción A/B para seleccionar una posición relativa 
de apilamiento y después seleccione el nombre de otra capa en el menú emergente 
que aparece directamente a la derecha. (A especifica una capa por encima de la 
capa actual; B especifica una capa por debajo de la capa actual.) 

Vis Determina el estado inicial de visualización de la capa. Use un lenguaje de 
secuencias de comandos, como JavaScript, para controlar la propiedad de 
visibilidad y visualizar en forma dinámica el contenido de la capa. Dispone de las 
opciones siguientes; 

• La opción predeterminada no especifica ninguna propiedad de visibilidad, pero 
la mayoría de los exploradores interpretan esta configuración como inherit 
(heredada). 

• Inherit usa la propiedad de visibilidad de la capa padre. 

• Visible muestra el contenido de la capa, independientemente del valor de la 
capa padre. 

• Hidden (oculto) oculta el contenido de la capa, independientemente del valor 
de la capa padre. Observe que las capas ocultas creadas con LAYER e ILAYER 
siguen ocupando el mismo espacio que si fueran visibles. 

Im. fondo Especifica una imagen de fondo para la capa. Haga clic en el icono de 
carpeta para buscar y seleccionar un archivo de imagen o escriba la ruta de la 
imagen en el campo de texto. 

Col. fondo Especifica un color de fondo para la capa. Deje esta opción en blanco 
para especificar un fondo transparente. 

Etiqueta Indica si la capa es una capa CSS o una capa Netscape. SPAN y DIV crean 
capas CSS; LAYER e IAYER crean capas Netscape. 
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Desbordamiento (Para capas CSS, solamente) Determina lo que ocurre si el 
contenido de una capa excede de su tamaño. Dispone de las opciones siguientes: 

• Visible aumenta el tamaño de la capa para que todo su contenido sea visible. La 
capa se expande hacia abajo y hacia la derecha. 

• Hidden (oculto) mantiene el tamaño de la capa y recorta cualquier contenido 
que no quepa. No hay barras de desplazamiento. 

• Scroll (desplazamiento) agrega barras de desplazamiento a la capa 
independientemente de que el contenido exceda o no del tamaño de la capa. La 
inclusión específica de barras de desplazamiento evita la confusión que provoca 
la aparición y desaparición de las barras de desplazamiento en un entorno 
dinámico. Esta opción sólo funciona en aquellos exploradores que admiten 
barras de desplazamiento. 

• Auto (automático) presenta las barras de desplazamiento solamente cuando el 
contenido de la capa excede de sus límites. 

Recorte Define el área visible de una capa. Especifique valores que representen la 
distancia en píxeles desde los límites de la capa. Los valores de configuración de 
Sup (borde superior) e Iz (izquierda) se refieren a la capa, no a la página. 

Izda, Sup o PágX, PágY (Para capas Netscape solamente) permite situar una capa 
en relación con su capa padre. La opción Izda, Sup sitúa la capa con respecto al 
ángulo superior izquierdo de la capa padre. La opción PágX, PágY sitúa la capa en 
una ubicación absoluta con respecto al ángulo superior izquierdo de la página, 
independientemente de la posición de la capa padre. 

Orig (Para capas Netscape solamente) Permite visualizar otro documento HTML 
dentro de la capa. Haga clic en el icono de la carpeta para examinar y seleccionar el 
documento o escriba la ruta del documento. Observe que Dreamweaver no 
muestra esta propiedad en la ventana de documento. 

A/B (Para capas Netscape solamente) Especifica la capa de arriba (A) o de abajo (B) 
con respecto a la capa actual en el orden de apilamiento (índice z). Sólo las capas 
previamente definidas en el documento aparecerán en la lista de nombres de capas 
a la derecha del menú A/B. 


Usar capas 241 



Configurar propiedades para capas múltiples 

Cuando se seleccionan dos o más capas, el inspector de propiedades de capas 
mostrará las propiedades de texto y un subconjunto de las propiedades habituales 
de las capas, lo que permite modificar varias capas de una sola vez. Para seleccionar 
múltiples capas, mantenga pulsada la tecla Mayús mientras selecciona las capas. 
Consulte “Trabajar con capas”, en la página 243. 

Iz y Sup Especifican la posición de la capas desde el ángulo superior izquierdo de la 
página o capa padre. 

An y Al Especifican la anchura y la altura de las capas. Si el contenido de las capas 
excede del tamaño especificado, estos valores son anulados. 

Para capas CSS, los valores predeterminados de ubicación y tamaño se expresan en 
píxeles (px). También se pueden emplear las siguientes unidades: pe (picas), pt 
(puntos), in (pulgadas), mm (milímetros), cm (centímetros) o % (porcentaje del 
valor padre). Las abreviaturas deben seguir al valor sin espacio de separación: por 
ejemplo: 3mm. 

Vis Determina el estado inicial de visualización de las capas. Use un lenguaje de 
secuencias de comandos, como JavaScript, para controlar la propiedad de 
visibilidad y visualizar en forma dinámica el contenido de la capa. Dispone de las 
opciones siguientes: 

• La opción predeterminada no especifica ninguna propiedad de visibilidad, pero 
la mayoría de los exploradores interpretan esta configuración como inherit 
(heredada). 

• Inherit usa la propiedad de visibilidad de la capa padre. 

• Visible muestra el contenido de la capa, independientemente del valor de la 
capa padre. 

• Hidden (oculta) muestra el contenido de la capa como si fuera transparente, 
independientemente del valor de la capa padre. Observe que las capas ocultas 
creadas con LAYER e ILAYER siguen ocupando el mismo espacio que si fueran 
visibles. 

Etiqueta Determina si las capas son CSS o Netscape. SPAN y DIV crean capas CSS; 
LAYER e ILAYER crean capas Netscape. 

Im. fondo Especifica una imagen de fondo para las capas. Haga clic en el icono de 
carpeta para buscar y seleccionar un archivo de imagen o escriba la ruta de la 
imagen en el campo de texto. 

Col. fondo Especifica un color de fondo para las capas. Deje esta opción en blanco 
para especificar un fondo transparente. 
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Trabajar con capas 

Al trabajar con el diseño de la página, las capas se pueden activar, seleccionar o 
cambiar su tamaño. La activación de las capas permite colocar contenido dentro 
de ellas. Seleccionar capas permite alinearlas, cambiar su posición o cambiar su 
tamaño. Cambiar el tamaño de las capas permite modificar las dimensiones de una 
sola capa o aplicar a dos o más capas las mismas dimensiones de alto y ancho. 

Al trabajar con una sola capa o con capas múltiples, aparecerán diferentes 
inspectores de propiedades. Consulte “Configurar propiedades de capa”, en la 
página 239 y “Configurar propiedades para capas múltiples”, en la página 242. 
Cuando se seleccionan múltiples capas, el menú Modificar muestra las opciones 
Capa y Zonas interactivas. 

Para evitar el solapamiento de unas capas con otras al moverlas o cambiar su 
tamaño, use la opción Evitar solapamiento. Consulte “Evitar solapamiento de 
capas”, en la página 251. 


Activar capas 

Active una capa para poder colocar objetos en ella. Al activar una capa, se coloca 
en ella el punto de inserción, se resalta el borde de la capa y aparece el manejador 
de selección, pero no se selecciona la capa. 

Para activar una capa: 

Haga clic en cualquier lugar dentro de la capa. 
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Seleccionar capas 

Seleccione una o más capas para alinearlas, asignarles la misma anchura y altura, 
cambiar su posición, etc. Para ver una lista completa de opciones, consulte 
“Configurar propiedades de capa”, en la página 239. 


Para seleccionar una capa, lleve a cabo una de estas operaciones: 

• En la ventana de documento, haga clic en la marca de capa que representa la 
ubicación de la capa en el código HTML. Si no se ve la marca de capa, elija Ver 
> Elementos invisibles. 

• Haga clic en un manejador de selección de capa. Si el manejador no está visible, 
haga clic en cualquier punto dentro de la capa para hacerlo visible. 

ja_._ 


• Haga clic en el borde de una capa. 

• Si no hay capas activas o seleccionadas, haga clic dentro de una capa mientras 
pulsa la tecla Mayús. 

• Si hay varias capas seleccionadas, haga clic dentro de una capa mientras pulsa 
las teclas Control y Mayús (Windows) o Comando y Mayús (Macintosh). De 
este modo se anulará la selección de las restantes capas. 

• En la paleta de capas, haga clic en el nombre de la capa. 

Para seleccionar varias capas, lleve a cabo una de estas operaciones: 

• Pulse Mayús y haga clic dentro o en el borde de dos o más capas. 

• En la paleta de capas, haga clic en dos o más nombres de capas mientras pulsa la 
tecla Mayús. 

Cuando haya varias capas seleccionadas, los manejadores de la última capa 
seleccionada se resaltarán en negro. Los manejadores de las demás capas se 
resaltarán en blanco. 
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Cambiar el tamaño de capas 

Puede cambiar el tamaño de una capa individual o de varias capas 
simultáneamente para asignarles la misma anchura y altura. 

Si está activada la opción Evitar solapamiento, no podrá cambiar el tamaño de una 
capa para que se solape con otra. Consulte “Evitar solapamiento de capas”, en la 
página 251. 

Para cambiar el tamaño de una capa, lleve a cabo una de estas operaciones: 

• Para cambiar el tamaño arrastrando, seleccione la capa y arrastre uno de los 
manejadores de cambio de tamaño. 

• Para cambiar el tamaño un píxel cada vez, seleccione la capa y pulse las tecla 
Control-flecha (Windows) o las teclas Opción-flecha (Macintosh). 

• Para cambiar el tamaño en el incremento de ajuste a la cuadrícula, pulse las 
teclas Mayús-Control-flecha (Windows) u Opción-flecha (Macintosh). Para 
obtener información sobre la configuración del incremento de ajuste a la 
cuadrícula, consulte “Ajustar capas a la cuadrícula”, en la página 246. 

• En el inspector de propiedades, escriba un valor para la anchura y la altura. 

Al cambiar el tamaño de una capa cambiarán su anchura y altura. Esta 
operación, sin embargo, no define qué cantidad de contenido de la capa queda 
visible. Para definir la región visible de una capa, consulte “Configurar 
propiedades de capa”, en la página 239. 

Para cambiar el tamaño de varias capas: 

1 En la ventana de documento, seleccione dos o más capas. 

2 Lleve a cabo una de estas operaciones: 

• Elija Modificar > Capas y zonas interactivas> Asignar mismo ancho o Modificar 
> Capas y zonas interactivas > Asignar mismo alto. 

Las primeras capas seleccionadas se ajustarán a la anchura o la altura de la 
última capa seleccionada (resaltada en negro). 

• En el inspector de propiedades, bajo Varias capas, introduzca los valores de 
anchura y altura. Estos valores se aplicarán a todas las capas seleccionadas. 
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Mover capas 

La operación de mover capas en la ventana de documento le resultará familiar a 

cualquiera que haya trabajado con aplicaciones gráficas básicas. 

Si está activada la opción Evitar solapamiento, no podrá mover una capa para que 

se solape con otra. Consulte “Evitar solapamiento de capas”, en la página 251. 

Para mover una o varias capas, lleve a cabo una de estas operaciones: 

• Para mover arrastrando, seleccione las capas y arrastre el manejador de selección 
de la última capa seleccionada (resaltada en negro). 

• Para mover un píxel cada vez, seleccione las capas y use las teclas de flecha. 
Utilice la tecla Mayús y una tecla de flecha para mover la capa en el incremento 
actual de ajuste a la cuadrícula. Para obtener información sobre la 
configuración del incremento de ajuste a la cuadrícula, consulte “Ajustar capas a 
la cuadrícula”, en la página 246. 


Alinear capas 

Utilice los comandos de alineación de capas para alinear una o varias capas con el 
borde de la última capa seleccionada. 

Cuando se alinean capas, las capas hijas que no están seleccionadas pueden moverse si 
se selecciona y se mueve su capa padre. Para evitarlo, no utilice capas anidadas. 

Para alinear dos o más capas: 

1 Seleccione las capas. 

2 Elija Modificar > Capas y zonas interactivas y seleccione una opción de alineación. 

Por ejemplo, si selecciona Alinear con el borde superior, se moverán todas las 
capas de modo que sus bordes superiores queden en la misma posición vertical 
que el borde superior de la última capa seleccionada (resaltada en negro). 

Ajustar capas a la cuadrícula 

Utilice la cuadrícula como guía visual para colocar y cambiar el tamaño de las capas en 
la ventana de documento. Si está activado el ajuste, las capas se situarán 
automáticamente en la posición de ajuste más próxima cuando se muevan o cambien 
de tamaño. El ajuste funciona independientemente de que la cuadrícula esté visible. 


Para mostrar la cuadrícula, lleve a cabo una de estas operaciones: 

• Elija Ver > Cuadrícula > Mostrar. 

• Elija Ver > Cuadrícula > Configuración y seleccione la opción Cuadrícula visible. 
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Para ajustar una capa: 

1 Elija Ver > Cuadrícula > Ajustar a para activar (o desactivar) la opción de ajuste. 

2 Seleccione la capa y arrástrela; al arrastrarla, la capa saltará hasta la posición de 
ajuste más próxima. Cuando la suelte, la capa saltará a la posición de ajuste 
más próxima. 


Para cambiar la configuración de cuadrícula y ajuste: 

1 Elija Ver > Cuadrícula > Configuración para abrir el cuadro de diálogo. 

2 Seleccione las opciones deseadas. 

• Cuadrícula visible permite ver la cuadrícula. Funciona conjuntamente con el 
comando Mostrar (Ver > Cuadrícula > Mostrar). 

• Espaciado define la distancia entre las marcas de cuadrícula. Introduzca un 
número y, a continuación, elija píxeles, pulgadas o centímetros en el menú 
emergente Unidades. La unidad mínima es de 25 píxeles. 

• Color especifica el color de las marcas de la cuadrícula. El color predeterminado 
es azul claro. 

• Mostrar especifica si la cuadrícula debe mostrarse como líneas o como puntos. 

• Ajuste activa o desactiva la opción de ajuste. Funciona conjuntamente con el 
comando Ajustar a (Ver > Cuadrícula > Ajustar a). 

• Ajustar cada especifica una unidad de ajuste. Introduzca un número de 
unidades en el cuadro Ajustar cada y, a continuación, elija píxeles, pulgadas o 
centímetros en el menú emergente Unidades. El valor predeterminado es 5 
píxeles. 

Para hacer que las capas se ajusten a la cuadrícula visible, las unidades de 
cuadrícula y ajuste deben ser iguales. Por ejemplo, si Espaciado se define como 
50 píxeles, defina Ajustar cada como 50 píxeles. 

3 Haga clic en Aceptar. 
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Cambiar el orden de apilamiento de las capas 

Utilice el inspector de propiedades o la paleta de capas para cambiar el orden de 
apilamiento de las capas. La capa que figura en la parte superior de la lista de la 
paleta de capas es la primera en el orden de apilamiento. 

En el código HTML, el orden de apilamiento o el índice z determinan el orden en 
que se dibujan las capas en un explorador. Puede cambiar el índice z para cada 
capa mediante el inspector de propiedades o la paleta de capas. 

Par cambiar el orden de apilamiento de capas utilizando el inspector de 
propiedades: 

1 Elija Ventana > Capas para abrir la paleta de capas y ver el orden de 
apilamiento>actual. 

2 Seleccione una capa de la paleta de capas o de la ventana de documento. 

3 En el inspector de propiedades de capas, escriba un número en el campo Indice 
Z. 

• Escriba un número superior para colocar la capa en un nivel inferior del orden 
de apilamiento. 

• Escriba un número inferior para mover la capa hacia arriba en el orden de 
apilamiento. 

Par cambiar el orden de apilamiento de capas en la paleta de capas: 

Elija Ventana > Capas para abrir la paleta de capas. En la paleta de capas, lleve a 
cabo una de estas operaciones: 

• En la columna Z, haga clic en el número de la capa que desea cambiar. Escriba 
un número superior al existente para hacer retroceder la capa en el orden de 
apilamiento o escriba un número inferior para hacerla avanzar. 

• Seleccione y arrastre una capa hacia arriba o hacia abajo hasta el nivel deseado 
dentro del orden de apilamiento. Observará que aparece una línea al mover la 
capa. Suelte el botón del ratón cuando la línea de colocación aparezca en el 
lugar deseado dentro del orden apilamiento. 
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Cambiar la visibilidad de una capa 

Mientras trabaja con un documento, puede mostrar y ocultar capas para ver qué 
apariencia tendrá la página en distintas condiciones. Use la paleta de capas para 
cambiar la visibilidad de las capas. Use el panel de preferencias de capa para definir 
la visibilidad predeterminada de las capas nuevas. Consulte “Configurar 
preferencias de capa”, en la página 239. 

Para cambiar la visibilidad de las capas: 

1 Elija Ventana > Capas para abrir la paleta de capas. 

2 En la fila de la capa en cuestión, haga clic en la columna de icono de ojo hasta 
que alcanzar la visibilidad deseada. 

• Si el ojo está abierto significa que la capa es visible. 

• Si está cerrado, la capa es invisible. 

• Si no hay icono de ojo, la capa hereda la visibilidad de su padre. (Cuando las 
capas no están anidadas, el padre es el cuerpo del documento, que siempre está 
visible.) 

Para cambiar la visibilidad de todas las capas a la vez: 

1 Elija Ventana > Capas para abrir la paleta de capas. 

2 Haga clic en el icono de ojo del encabezado de la columna. 

Capas y tablas 

Las capas sirven para situar contenido en una página. Es más fácil utilizar capas y 
cambiar su diseño que manipular celdas de tablas. Puede utilizar capas para crear 
rápidamente diseños de página complejos y, a continuación, convertir las capas en 
tablas para ofrecer compatibilidad con los exploradores 3.0, que no son 
compatibles con el uso de capas. También puede alternar entre capas y tablas para 
optimizar el diseño de la página. 

Puede convertir las capas en tablas o viceversa en una plantilla de documento o en 
un documento al que se haya aplicado una plantilla. Cree el documento original y 
conviértalo antes de guardarlo como plantilla. 

Si desea destinar su página a exploradores 4.0 y posteriores, puede utilizar una 
combinación de tablas y capas e incluso animar las capas. Para obtener más 
información sobre la animación de capas, consulte “Líneas de tiempo”, en la 
página 253. 

Si desea generar archivos compatibles con exploradores 3.0 a partir del archivo 
actual, utilice la opción Convertir del menú Archivo. Consulte “Convertir para 
compatibilidad con la versión 3.0”, en la página 252. 
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Usar capas para diseñar tablas 

Al diseñar tablas, puede que le resulte más fácil diseñar una página utilizando 
capas que convertir el diseño de capas a un diseño de tabla. 

Para convertir las capas en una tabla: 

1 Elija Modificar > Modo de diseño > Convertir capas en tabla. 

2 En el cuadro de diálogo que aparece, seleccione las opciones deseadas de diseño 
de tablas. 

• Más preciso crea una celda de tabla para cada capa, junto con las celdas 
adicionales necesarias para conservar el espacio entre capas. 

• Mínimo: contraer celdas vacías, especifica que los bordes de las capas deben 
alinearse si se sitúan a la distancia especificada en píxeles. Si esta opción está 
seleccionada, la tabla resultante tendrá menos filas y columnas. 

• Usar GIF transparentes rellena la última fila de la tabla con GIF transparentes. 
De este modo se garantiza que la tabla aparezca de la misma forma en todos los 
exploradores. 

Cuando esta opción está activada, resulta imposible editar la tabla resultante 
arrastrando sus columnas. Cuando está desactivada, la tabla resultante no 
contiene GIF transparentes, pero su apariencia puede variar ligeramente en los 
distintos exploradores. 

• Centrar en página centra la tabla resultante en la página. 

Si esta opción está desactivada, la tabla se alinea a la izquierda. 

3 Seleccione las herramientas de diseño y las opciones de cuadrícula deseadas y 
haga clic en Aceptar. 


Para convertir una tabla en capas: 

1 Elija Modificar > Modo de diseño > Convertir tablas en capas. 

2 En el cuadro de diálogo que aparece, seleccione las opciones deseadas. 

• Mostrar cuadrícula y Ajustar a cuadrícula permiten utilizar una cuadrícula para 
facilitar la colocación de las capas. Consulte “Ajustar capas a la cuadrícula”, en 
la página 246. 

• Evitar solapamiento de capas limita las posiciones de las capas cuando se crean, 
mueven y cambian de tamaño para evitar que se solapen. Consulte “Evitar 
solapamiento de capas”, en la página 251. 

• Mostrar paleta de capas muestra la paleta de capas. Consulte “Paleta de capas”, 
en la página 237. 

3 Haga clic en Aceptar. 

Las tablas se convierten en capas dentro del archivo. Las celdas vacías no se 
convierten en capas. El contenido fuera de las tablas también se sitúa en capas. 
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Evitar solapamiento de capas 

Dado que las celdas de las tablas no se pueden solapar, Dreamweaver no puede 
crear una tabla a partir de capas solapadas. Si tiene previsto convertir las capas de 
un documento en tablas para ofrecer compatibilidad con los exploradores 3.0, 
utilice la opción Evitar solapamiento a fin de limitar el movimiento y la ubicación 
de las capas y evitar su solapamiento. 

Para evitar el solapamiento de capas: 

Elija Ver > Evitar solapamiento de capas o seleccione la opción Evitar 
solapamiento en la paleta de capas. 



Cuando esté activada esta opción, no podrá crear capas delante de otras capas 
existentes; tampoco podrá mover, cambiar el tamaño o anidar capas en otras ya 
existentes. Si activa esta opción después de crear capas solapadas, arrastre la capa 
solapada para apartarla de la otra capa. 

Cuando esta opción y la de ajuste de posición estén activadas, las capas no se 
ajustarán a la cuadrícula si con ello se diera lugar al solapamiento de dos capas. Por 
el contrario, se ajustarán al borde de la capa más próxima. 

Nota: Algunas acciones no Impiden que las capas se solapen Incluso cuando está activada la 
opción Evitar solapamiento. Si inserta una capa desde el menú, introduce números en el 
inspector de propiedades o cambia las capas de posición editando el código fuente HTML en 
el inspector de propiedades, puede provocar que las capas se solapen o aniden a pesar de 
que la opción esté activada. Si se produce una situación de este tipo, arrastre las capas 
superpuestas en la ventana de documento para separarlas. 
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Convertir para compatibilidad con la versión 3.0 

Utilice la opción Convertir del menú Archivo para crear una versión de una 
página que utilice capas y que resulte compatible con los exploradores 3.0 o para 
convertir un documento que usa tablas en otro con capas. En cada situación de 
conversión, Dreamweaver creará un documento independiente convertido y 
conservará el documento original. 

En general, sólo deberá convertir un documento cuando esté completamente 
satisfecho con el archivo original, ya que deberá repetir la conversión cada vez que 
cambie el archivo original. 

Nota: Si desea utilizar capas para diseñar una página para uso con exploradores 3.0, utilice 
los comandos de Modo de diseño del menú Modificar para convertir la página actual de un 
diseño de tabla a otro de capa y a la inversa sin crear otro archivo. Consulte "Usar capas para 
diseñar tablas", en la página 250. 


Para convertir un archivo para uso con exploradores 3.0: 

1 Elija Archivo > Convertir > Compatible con explorador 3.0. 

2 En el cuadro de diálogo que aparece, elija si desea convertir capas a tablas, 
estilos CSS a formato HTML (estilos de carácter) o ambas opciones. 

3 Haga clic en Aceptar. 

Dreamweaver abrirá el archivo convertido en una ventana nueva y sin título. 
Todas las capas serán sustituidas por una sola tabla que mantendrá la posición 
original. 

Nota: Las capas solapadas no se pueden convertir, al igual que las capas que están fuera 
de la página a la izquierda o en la parte superior. 

Siempre que resulte posible, el formato CSS se sustituye por estilos de 
caracteres HTML. Todo el formato CSS que no se pueda convertir a HTML 
será eliminado. Consulte la “Tabla de conversión de CSS a formato HTML”, 
en la página 196 para obtener información sobre los estilos que se convierten y 
los que se eliminan. 

El código de línea de tiempo que anima capas se elimina. El código de línea de 
tiempo que no está relacionado con capas (por ejemplo, comportamientos o 
cambios en el origen de la imagen) se ejecutará con el tiempo de acuerdo con su 
diseño. La línea de tiempo se rebobinará automáticamente hasta el marco 1. 


252 Capítulo 9 



Líneas de tiempo 

Se conoce por HTML dinámico, o DHTML, el lenguaje HTML capaz de 
cambiar las propiedades de estilo o de ubicación con un lenguaje de secuencias de 
comandos. Las líneas de tiempo usan HTML dinámico para cambiar las 
propiedades de las capas e imágenes en una serie de marcos con el transcurso del 
tiempo. Use líneas de tiempo para crear animaciones sin controles ActiveX, plug- 
ins, ni applets de Java. 

Las líneas de tiempo crean la animación al cambiar la posición, el tamaño, la 
visibilidad y el orden de apilamiento de una capa con el transcurso del tiempo. Las 
líneas de tiempo también sirven para realizar otras acciones que después de que 
termine de cargarse la página. Por ejemplo, las líneas de tiempo pueden cambiar el 
archivo de origen de una imagen y ejecutar comportamientos en un momento 
determinado. Las funciones de capa de las líneas de tiempo solamente funcionan 
en las versiones 4.0 o posteriores de los exploradores. 

Para ver el código JavaScript generado por una línea de tiempo, abra el inspector 
de HTML. El código de línea de tiempo está en la función MMJnitTimelines dentro 
de una etiqueta SCRIPT en la sección HEAD del documento. 

Al editar el código HTML de un documento que contenga líneas de tiempo, 
tenga cuidado de no mover, cambiar el nombre o borrar algo que esté relacionado 
con la línea de tiempo. 


Usar el inspector de líneas de tiempo 

El inspector de líneas de tiempo representa las propiedades de las capas e imágenes 
en el transcurso del tiempo. Elija Ventana > Líneas de tiempo para abrir el 
inspector de líneas de tiempo. Consulte también “Líneas de tiempo”, en la 
página 253. 

Haga clic con el botón derecho del ratón (Windows) o haga clic manteniendo 
pulsada la tecla Control (Macintosh) en el inspector de líneas de tiempo para abrir 
un menú contextual que incluye todos los comandos importantes. 

Cabezal de reproducción Muestra qué marco de la línea de tiempo se está 
visualizando actualmente en la página. 



Menú emergente Línea de tiempo 


Cabezal de reproducción 


Menú emergente Línea de tiempo Especifica qué líneas de tiempo del documento 
se mostrarán en el inspector de líneas de tiempo. 

Canales de animación Muestran barras para animar capas e imágenes. 
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Barras de animación Muestran la duración de cada objeto. Una sola fila puede 
incluir múltiples barras en representación de otros tantos objetos. Barras diferentes 
no pueden controlar un mismo objeto en el mismo marco. 

Cuadros clave Son cuadros en una barra en los que se han especificado 
propiedades del objeto (como posición, por ejemplo). Dreamweaver calcula 
valores intermedios para marcos en cuadros clave. Los cuadros clave se señalan 
mediante pequeños círculos. 

Canal Behavior Es el canal de los comportamientos que deben ejecutarse en un 
marco determinado de la línea de tiempo. 


U3 




Canal Behavior 


Número de marcos Indica el número de marcos que ocupa cada barra. El número 
que aparece entre los botones Atrás y Reproducir es el marco actual. La duración 
de la animación se controla estableciendo el número total de marcos y el número 
de marcos por segundo (fps). El valor predeterminado de 15 marcos por segundo 
es una buena velocidad media para la mayoría de los exploradores que se ejecutan 
en sistemas normales Windows o Macintosh. Las velocidades más altas no 
mejoran necesariamente los resultados. Los exploradores siempre reproducen 
todos los marcos de la animación, incluso aunque en el sistema del usuario no 
puedan alcanzar la velocidad de marcos por segundo. 

B 
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Opciones de reproducción 

A continuación se enumeran las opciones de reproducción para ver la animación. 

3EH 18 3 |S Reprod. automática [ÉT Buctj 

Rebobinar Desplaza el cabezal de reproducción hasta el primer marco de la línea 
de tiempo. 

Atrás Desplaza el cabezal de reproducción un marco hacia la izquierda. Haga clic 
en el botón Atrás y manténgalo pulsado para reproducir la línea de tiempo hacia 
atrás. 

Reproducir Desplaza el cabezal de reproducción un marco hacia la derecha. Haga 
clic en el botón Reproducir y manténgalo pulsado para reproducir la línea de 
tiempo continuamente. 

Rep. autom. Inicia automáticamente la reproducción de una línea de tiempo 
cuando la página actual se carga en un explorador. Rep. autom. adjunta un 
comportamiento a la sección BODY de la página que ejecuta la acción Reproducir 
línea de tiempo cuando se carga la página. 

Bucle Hace que la línea de tiempo actual se reproduzca en bucle indefinidamente 
mientras la página esté abierta en un explorador. Bucle inserta el comportamiento 
Ir a marco de línea de tiempo en el canal Behavior después del último marco de la 
animación. Haga doble clic en el marcador de este marco para editar los 
parámetros de este comportamiento y cambiar el número de repeticiones en bucle. 


Crear una animación de líneas de tiempo 

Las líneas de tiempo crean la animación al cambiar la posición, el tamaño, la 
visibilidad y el orden de apilamiento de las capas. Las líneas de tiempo también 
pueden cambiar los archivos de origen de las imágenes. 

Las líneas de tiempo solamente pueden mover capas. Para hacer que se muevan 
imágenes o texto, cree una capa usando el botón Capa de la paleta de objetos y 
luego inserte imágenes, texto o cualquier otro tipo de contenido en la capa. 
Consulte “Crear capas”, en la página 236. 
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Haga clic en el 
marcador de la 
capa para 
seleccionarla 


Para crear una animación de líneas de tiempo: 

1 Para animar una capa, desplace la capa al lugar donde deberá estar cuando se 
inicie la animación. 

2 Elija Ventana > Líneas de tiempo. 

3 Seleccione la capa que desea animar. 

Asegúrese de haber seleccionado el elemento deseado. Haga clic en el marcador 
de capa o use la paleta de capas para seleccionar una capa. Consulte también 
“Trabajar con capas”, en la página 243. Al seleccionar una capa, a su alrededor 
aparecen manejadores, como se muestra en la siguiente ilustración. 
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Botón 

Arrastrar capa 


Capa seleccionada 
con una imagen en 
su interior 


Al hacer clic en la capa, en su interior aparecerá un punto de inserción 
intermitente, pero no se selecciona la capa. 

4 Elija Modificar > Línea de tiempo > Agregar objeto a línea de tiempo, o 
simplemente arrastre el objeto seleccionado al interior del inspector de líneas de 
tiempo. 

Aparecerá una barra en el primer canal de la línea de tiempo. En la barra se 
mostrará el nombre de la capa. 

Si está trabajando con una imagen, la única propiedad que puede cambiar es el 
archivo de origen de la imagen en el inspector de propiedades. Los pasos 
restantes no proceden. Consulte “Cambiar propiedades de imagen y capa con 
líneas de tiempo”, en la página 259. 

5 Haga clic en el marcador del cuadro clave que se encuentra en el extremo de la 
barra. 

6 Desplace la capa al lugar de la página en el que deberá estar cuando termine la 
animación. 
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7 Si desea que la capa se desplace describiendo una curva, seleccione su barra de 
animación y haga clic manteniendo pulsada la tecla Control (Windows) o 
manteniendo pulsada la tecla Comando (Macintosh) para agregar un cuadro 
clave en el punto de inserción, o haga clic en un marco en medio de la barra de 
animación y elija Agregar cuadro clave del menú contextual. 

Repita este paso para definir más cuadros clave. 

8 Mantenga pulsado el botón Reproducir para obtener una vista previa de la 
animación en la página. 

Repita el procedimiento para agregar otras capas e imágenes a la línea de 
tiempo y para crear una animación más compleja. 


Crear una línea de tiempo arrastrando una ruta 

Si desea crear una animación con una ruta compleja, puede ser más conveniente 
grabar la ruta al arrastrar la capa en lugar de crear cuadros clave individuales. 

Para crear una línea de tiempo arrastrando una ruta: 

1 Seleccione una capa. 

2 Desplace la capa al lugar donde deberá estar cuando se inicie la animación. 

Asegúrese de haber seleccionado el elemento correcto. Haga clic en el marcador 
de capa o use la paleta de capas para seleccionar una capa. Consulte también 
“Trabajar con capas”, en la página 243. 

3 Elija Modificar > Ruta grabada de capa. 

4 Arrastre la capa por la página para crear una ruta. 

5 Suelte el botón del ratón en el punto en donde debe detenerse la animación. 

Dreamweaver agrega una barra de animación a la línea de tiempo con el 
número adecuado de cuadros clave. 

6 En el inspector de líneas de tiempo, haga clic en el botón Rebobinar; luego, 
mantenga pulsado el botón Reproducir para obtener una vista previa de la 
animación. 
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Modificar líneas de tiempo 

Después de definir los componentes básicos de una línea de tiempo, se pueden 

realizar útiles cambios como agregar y eliminar marcos, cambiar el momento de 

inicio de la animación, etc. 

Para modificar una línea de tiempo, lleve a cabo una de estas operaciones: 

• Para prolongar la duración de la animación, arrastre el marcador del marco 
final. Todos los cuadros clave de la animación se desplazarán, por lo que sus 
posiciones relativas permanecerán constantes. Mantenga pulsada la tecla 
Control (Windows) o Comando (Macintosh) mientras arrastra el marcador del 
marco final para evitar que se muevan los demás cuadros clave. 

• Para conseguir que la capa llegue al cuadro clave tarde o temprano, desplace el 
marcador del cuadro clave hacia la derecha o la izquierda en la barra. 

• Para cambiar el momento de inicio de una animación, seleccione una o todas 
las barras asociadas con la animación (pulse la tecla Mayús para seleccionar más 
de una barra a la vez) y arrástrelas a derecha o izquierda. 

• Para desplazar la posición de una ruta de animación completa, seleccione toda 
la barra y luego arrastre el objeto por la página. Dreamweaver ajusta la posición 
de todos los cuadros clave. Si se realiza cualquier tipo de cambio teniendo 
seleccionada toda la barra, el cambio se aplicará a todos los cuadros clave. 

• Para agregar o eliminar cuadros de la línea de tiempo, elija Modificar > Línea de 
tiempo > Agregar marco o Modificar > Línea de tiempo > Eliminar marco. 

• Para hacer que la línea de tiempo se reproduzca automáticamente al abrirse la 
página en un explorador, haga clic en Rep. autom. Rep. autom. adjunta un 
comportamiento a la página que ejecuta la acción Reproducir línea de tiempo 
cuando se carga la página. 

• Para conseguir que la página se reproduzca continuamente en bucle, haga clic 
en Bucle. Bucle inserta la acción Ir a marco de línea de tiempo en el canal 
Behavior después del último marco de la animación. Pueden editarse los 
parámetros de este comportamiento para definir el número deseado de 
repeticiones en bucle. 
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Cambiar propiedades de imagen y capa con líneas de tiempo 

Además de mover capas con líneas de tiempo, se puede cambiar el archivo de 
origen de una imagen y la visibilidad, el tamaño y el orden de apilamiento de una 
capa. 

Para cambiar las propiedades de imagen y capa con una línea de tiempo: 

1 En el inspector de líneas de tiempo, lleve a cabo una de estas operaciones: 

• Seleccione un cuadro clave de la barra que controla el objeto que desea cambiar. 
(Los marcos inicial y final son cuadros clave.) 

• Para crear un nuevo cuadro clave, haga clic en un marco situado en medio de la 
barra de animación y elija Modificar > Línea de tiempo > Agregar cuadro clave 
o haga clic mientras mantiene pulsada la tecla Control (Windows) o Comando 
(Macintosh) en un cuadro de la barra de animación. 

2 Defina nuevas propiedades para el objeto eligiendo una de las siguientes 
opciones: 

• Para cambiar el archivo de origen de una imagen, haga clic en el icono de la 
carpeta que aparece junto al campo Orig en el inspector de propiedades para 
examinar y seleccionar una nueva imagen. 

• Para cambiar la visibilidad de una capa, elija inherit, visible o hidden (heredada, 
visible u oculta) del menú emergente Visibilidad en el inspector de 
propiedades. Consulte también “Cambiar la visibilidad de una capa”, en la 
página 249. 

• Para cambiar el tamaño de una capa, arrastre la capa por los manej adores de 
cambio de tamaño o introduzca nuevos valores en los campos Ancho y Alto del 
inspector de propiedades. Actualmente, Internet Explorer 4.0 y 5.0 son los 
únicos exploradores capaces de cambiar dinámicamente el tamaño de una capa. 

• Para cambiar el orden de apilamiento de una capa, introduzca un nuevo valor 
en el campo índice Z o use la paleta de capas para cambiar el orden de 
apilamiento de la capa actual. Consulte también “Cambiar el orden de 
apilamiento de las capas”, en la página 248. 

3 Mantenga pulsado el botón Reproducir para ver la animación. 

La capa actualmente seleccionada siempre está visible y en la primera posición del 
orden de apilamiento. Anule la selección de todas las capas que estuvieran 
seleccionadas para que la línea de tiempo controle el orden de apilamiento o la 
visibilidad. 
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Usar múltiples líneas de tiempo 

En lugar de intentar controlar la totalidad de la acción en una página con una 
línea de tiempo, resulta más fácil trabajar con líneas de tiempo independientes que 
controlen partes concretas de la página. Por ejemplo, una página puede incluir 
también elementos interactivos que desencadenen la reproducción de diferentes 
líneas de tiempo. 

Para manejar múltiples líneas de tiempo, use las opciones siguientes: 

• Para crear una nueva línea de tiempo, elija Modificar > Línea de tiempo > 
Agregar línea de tiempo. 

• Para eliminar una línea de tiempo, elija Modificar > Línea de tiempo > Quitar 
línea de tiempo. 

• Para cambiar el nombre de una línea de tiempo, elija Modificar > Línea de 
tiempo > Cambiar nombre de línea de tiempo o introduzca un nuevo nombre 
en el menú emergente Línea de tiempo. 

• Para ver una línea de tiempo diferente en el inspector de líneas de tiempo, elija 
una nueva línea de tiempo en el menú emergente Línea de tiempo del inspector 
de líneas de tiempo. 


Copiar y pegar animaciones 

Cuando ya tenga la secuencia de animación que desea, podrá copiarla y pegarla en 

otra zona de la línea de tiempo actual, en otra línea de tiempo del mismo 

documento o en una línea de tiempo de otro documento. También puede copiar y 

pegar múltiples secuencias de una sola vez. 

Para cortar o copiar y pegar secuencias de animación: 

1 Haga clic en una barra de animación para seleccionar una secuencia. Para 
seleccionar múltiples secuencias, pulse la tecla Mayús mientras hace clic, o 
pulse Conrtol-A (Windows) o Comando-A (Macintosh) para seleccionar todas 
las secuencias. 

2 Copie o corte la selección. 

3 Lleve a cabo una de estas operaciones: 

• Desplace el cabezal de reproducción a otro lugar de la línea de tiempo actual. 

• Seleccione otra línea de tiempo en el menú emergente Línea de tiempo. 

• Abra otro documento o cree uno nuevo y después, haga clic en el inspector de 
líneas de tiempo. 
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4 Pegue la selección en la línea de tiempo. 

Las barras de animación de un mismo objeto no pueden solaparse porque una 
capa no puede estar en dos lugares a la vez (tampoco una imagen puede tener 
dos orígenes diferentes al mismo tiempo). Si la barra de animación en la que 
está pegando la selección llegase a solaparse con otra barra de animación del 
mismo objeto, automáticamente Dreamweaver desplazaría la selección al 
primer marco en que no se solapase. 

A la hora de pegar secuencias de animación en otro documento, hay que tener 

presentes estos dos principios: 

• Si se copia una secuencia de animación para una capa y el nuevo documento 
contiene una capa con el mismo nombre, Dreamweaver aplicará las 
propiedades de la animación a la capa existente en el nuevo documento. 

• Si se copia una secuencia de animación para una capa y el nuevo documento no 
contiene una capa con el mismo nombre, Dreamweaver pegará la capa y su 
contenido desde el documento original junto con la secuencia de animación. 
Para aplicar la secuencia de animación pegada a otra capa del nuevo 
documento, elija Cambiar objeto en el menú contextual y seleccione el nombre 
de la segunda capa en el menú emergente. Si lo desea, puede borrar la capa 
pegada. Consulte “Aplicar una secuencia de animación a un objeto diferente”, 
en la página 261. 


Aplicar una secuencia de animación a un objeto diferente 

Para ahorrar tiempo, se puede crear una secuencia de animación una sola vez y 

aplicarla a las demás capas del documento. 

Para aplicar una secuencia de animación existente a otros objetos: 

1 En el inspector de líneas de tiempo, seleccione la secuencia de animación y 
cópiela. 

2 Haga clic en cualquier marco del inspector de líneas de tiempo y pegue la 
secuencia. 

3 Haga clic con el botón derecho del ratón (Windows) o haga clic manteniendo 
pulsada la tecla Control (Macintosh) en la secuencia de animación pegada y 
elija Cambiar objeto en el menú contextual. 

4 En el cuadro de diálogo que aparece a continuación, elija otro objeto en el 
menú desplegable y haga clic en Aceptar. 

5 Repita los pasos del 2 al 4 para todos los demás objetos a los que desee aplicar la 
misma secuencia de animación. 

También puede cambiar de idea con respecto a la capa que desea animar, después 

de haber creado la secuencia de animación; en este caso, basta con que siga los 

pasos 3 y 4 anteriores (no es necesario copiar y pegar). 
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Cambiar nombres de líneas de tiempo 


Para cambiar el nombre de la línea de tiempo mostrada en el inspector de líneas 
de tiempo, lleve a cabo una de estas operaciones: 

• Elija Modificar > Línea de tiempo > Cambiar nombre de línea de tiempo e 
introduzca un nuevo nombre en el cuadro de diálogo Cambiar nombre de línea 
de tiempo. 

• Introduzca un nuevo nombre en el menú emergente Nombre de línea de 
tiempo del inspector de líneas de tiempo. 

Si el documento contiene la acción de comportamiento Reproducir línea de 
tiempo (por ejemplo, si contiene un botón en el que el usuario debe hacer clic 
para iniciar la línea de tiempo), deberá editar el comportamiento para reflejar el 
nuevo nombre de la línea de tiempo. 


Sugerencias para la animación de líneas de tiempo 

Las siguientes sugerencias pueden mejorar el resultado de sus animaciones, y 

facilitar considerablemente su creación: 

• Muestre y oculte capas en lugar de cambiar el archivo de origen en animaciones 
con múltiples imágenes. Cambiar el archivo de origen de una imagen puede 
ralentizar la animación porque tendrá que cargarse la nueva imagen. Si todas las 
imágenes se cargan de una vez en capas ocultas antes de que se ejecute la 
animación, se evitarán las pausas y la ausencia de imágenes. 

• Amplíe las barras de animación para crear un movimiento más suave. Si la 
animación resulta entrecortada y las imágenes saltan de una posición a otra, 
arrastre el marco final de la barra de animación de la capa para extender el 
movimiento sobre más marcos. Al alargar la barra de animación se crean más 
puntos de datos entre los puntos de inicio y de final del movimiento; esto 
también hace que el movimiento sea más lento. Intente incrementar el número 
de marcos por segundo (fps) para aumentar la velocidad, pero tenga en cuenta 
que la mayoría de los exploradores que se ejecutan en sistemas de tipo medio no 
admiten animaciones a velocidades superiores a 15 fps. Pruebe la animación en 
distintos sistemas con diferentes exploradores para encontrar la mejor 
configuración posible. 

• No anime grandes mapas de bits. La velocidad de la animación mejorará si no 
mueve imágenes grandes. Como alternativa, cree imágenes compuestas y 
mueva partes pequeñas de estas imágenes. Por ejemplo, muestre un automóvil 
en movimiento animando solamente las ruedas. 

• Cree animaciones simples. No cree animaciones que requieran recursos 
distintos a los que pueden ofrecer los exploradores actuales. Los exploradores 
siempre reproducen todos los marcos en una animación de línea de tiempo, 
incluso cuando las capacidades del sistema o de Internet se reducen. 
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Acciones de comportamiento para controlar 
líneas de tiempo 

Adjunte las acciones de comportamiento que aquí se indican a un vínculo, botón 
u otro objeto para controlar líneas de tiempo. Para crear efectos atractivos, puede 
colocar comportamientos que contengan estas acciones en el canal Behavior. Por 
ejemplo, puede hacer que una línea de tiempo se detenga por sí sola. Para obtener 
más información, consulte “Adjuntar un comportamiento a una línea de tiempo”, 
en la página 303 y “Usar comportamientos”, en la página 297. 

Arrastrar capa Permite al usuario arrastrar una capa. Use esta acción para crear 
puzzles, controles deslizantes y otros elementos móviles de interfaz de usuario. 
Consulte “Arrastrar capa”, en la página 312. 

Mostrar-Ocultar capas Muestra, oculta o restaura la visibilidad predeterminada de 
una o más capas. Esta acción resulta útil para mostrar información a medida que el 
usuario va interactuando con la página. Consulte “Mostrar-Ocultar capas”, en la 
página 327. 

Reproducir línea de tiempo y Detener línea de tiempo Permiten a los usuarios 
iniciar y detener una línea de tiempo haciendo clic en un vínculo o un botón. 
Estas acciones también permiten iniciar y detener una línea de tiempo 
automáticamente cuando el usuario pasa el cursor del ratón por un vínculo, una 
imagen u otro objeto. Consulte “Reproducir línea de tiempo y Detener línea de 
tiempo”, en la página 331. 

Ir a marco de línea de tiempo Hace que la línea de tiempo salte a un marco 
determinado. La casilla de verificación Bucle del inspector de líneas de tiempo, 
agrega la acción Ir a marco de línea de tiempo después del último marco de la 
animación; esto hace que vaya al marco 1 y vuelva a iniciarse la animación. 
Consulte “Ir a marco de línea de tiempo”, en la página 330 

Definir texto de capa Reemplaza el contenido y el formato de una capa existente 
en una página con el contenido que usted especifique. Dicho contenido puede 
incluir cualquier código HTML. Consulte “Definir texto de capa”, en la 
página 324. 


Usar capas 263 



264 Capítulo 9 



io 



CAPÍTULO lO 

Usar marcos 


Los marcos constan de dos componentes principales: un conjunto de marcos y 
marcos individuales. Un conjunto de marcos es una página HTML que define la 
estructura de una serie de marcos en un documento. La definición del conjunto de 
marcos incluye información sobre el número de marcos que deben mostrarse por 
página, el tamaño de los marcos, el origen de la página cargada en un marco y 
otras propiedades. La página HTML de conjunto de marcos no se muestra en los 
exploradores; se limita a almacenar información sobre cómo deben mostrarse los 
marcos en una página. 

Los marcos HTML son regiones o áreas definidas espacialmente en una página 
HTML. Cada marco de una página equivale a un único documento HTML. En 
una página Web, con frecuencia los marcos definen un área de exploración y un 
área de contenido de la página. 

Al dividir un documento de Dreamweaver en marcos, creará documentos HTML 
independientes para el conjunto de marcos y por cada nuevo marco. El conjunto 
de marcos se conoce como marco padre, mientras que un marco se conoce como 
marco hijo. 

Puede crear nuevo contenido directamente en una página de marco, vincular 
páginas existentes para que se abran en un marco y configurar un comportamiento 
que cambie el contenido de múltiples marcos. 

Lo que el usuario percibe como una sola página Web con dos marcos, en realidad 
está formado por tres archivos independientes: el archivo de conjunto de marcos y 
dos archivos que albergan el contenido que aparece dentro de los marcos. 

El cambio de las propiedades de los marcos y los conjuntos de marcos permite 
cambiar el tamaño de los marcos y utilizar vínculos y destinos para controlar el 
contenido de un marco. 
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Cuando la opción Ver > Bordes de marco esté desactivada, el conjunto de marcos 
aparecerá exactamente como se ve en un explorador. Cuando se muestran los 
bordes de los marcos, Dreamweaver añade un espacio alrededor del documento 
para el borde y ensancha los bordes pequeños. Esto facilita las operaciones de 
arrastrar y seleccionar marcos. 


Crear marcos 

Puede crear marcos mediante la modificación de un documento de Dreamweaver 
ya existente dividiéndolo en áreas de documento adicionales. Existen varias formas 
de crear un conjunto de marcos: puede diseñarlo usted mismo o seleccionarlo de 
una serie de conjuntos de marcos predefinidos. 

Crear un conjunto de marcos 

Antes de crear un conjunto de marcos o trabajar con marcos, haga visibles los 
bordes de los marcos en la ventana de documento. 

Para ver los bordes de los marcos de un documento, elija Ver > Bordes de marco. 

Cuando se muestran los bordes de los marcos, se agrega espacio alrededor del 
borde del documento, lo que sirve de indicador visual de las áreas de marcos del 
documento. 

Para crear un conjunto de marcos, lleve a cabo una de estas operaciones: 

• Elija Modificar > Conjunto de marcos > Dividir marco a la izquierda, a la 
derecha, hacia arriba o hacia abajo. 

• Mantenga pulsada la tecla Alt (Windows) o la tecla Opción (Macintosh) 
mientras arrastra uno de los bordes del marco hasta dentro de la ventana de 
documento para dividir el documento vertical u horizontalmente. Arrastre un 
borde del marco por una de las esquinas para dividir el documento en cuatro 
marcos nuevos. 


Archivo Edición Ver insertar Modific. 
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Para eliminar un marco: 


Arrastre el borde del marco hasta sacarlo fuera de la página o hasta el borde del 
marco padre. 


Insertar un conjunto de marcos predefinido 

Los conjuntos de marcos predefinidos facilitan la selección del tipo de conjunto de 
marcos que desea crear. 

Los iconos de conjuntos de marcos predefinidos del panel Marcos de la paleta de 
objetos proporcionan una representación visual de cada conjunto de marcos al 
aplicarse a un documento seleccionado. 
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El conjunto de marcos seleccionado rodea al documento actual (el documento en 
el que se encuentra el punto de inserción). El área azul de un icono de conjunto de 
marcos predefinido representa la página o el marco seleccionado actualmente en 
un documento, mientras que el área blanca representa el nuevo o los nuevos 
marcos. 

Para insertar un conjunto de marcos predefinido: 

1 Sitúe el punto de inserción en el documento al que rodeará el conjunto de 
marcos. 

2 Luego lleve a cabo una de estas operaciones: 

• En el panel Marcos de la paleta de objetos, seleccione un conjunto de marcos 
predefinido. Para insertar el conjunto de marcos, puede hacer clic en un icono 
o arrastrar un icono directamente al documento. 

• Para seleccionar un conjunto de marcos predefinido, elija Insertar > Marcos > 
Izquierda, Derecha, Arriba, Abajo, Izquierda y arriba, Superior izquierda, 
Izquierda superior o Dividir. 
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Crear un conjunto de marcos anidado 

Un conjunto de marcos dentro de otro conjunto de marcos recibe el nombre de 
conjunto de marcos anidado. Cada nuevo conjunto de marcos creado incluye su 
propio documento HTML de conjunto de marcos y sus documentos de marcos. 

Utilice los marcos anidados para configurar múltiples marcos para un documento. 
Por ejemplo, un documento con tres marcos puede mostrar el logotipo de una 
empresa en un marco en la parte superior del documento, controles de 
exploración en otro marco en el lado izquierdo del documento y contenido en un 
tercer marco. 

Para crear un conjunto de marcos anidado: 

1 Sitúe el punto de inserción en el marco en el que desea insertar el conjunto de 
marcos anidado. 

2 Lleve a cabo una de estas operaciones: 

• Elija Modificar > Conjunto de marcos > Dividir marco hacia arriba, hacia 
abajo, a la izquierda o a la derecha. 

• En el panel Marcos de la paleta de objetos, seleccione un icono de conjunto de 
marcos. 

• Elija Insertar > Marcos > Izquierda, Derecha, Arriba, Abajo, Izquierda y arriba, 
Superior izquierda, Izquierda superior o Dividir. 

• En la ventana de documento, manteniendo pulsada la tecla Alt (Windows) o la 
tecla Opción (Macintosh), arrastre un borde de marco para dividir el marco 
vertical u horizontalmente. 


Seleccionar un marco o un conjunto de marcos 

Los marcos y los conjuntos de marcos son documentos HTML individuales. Para 
realizar cambios en un marco o en el conjunto de marcos, comience seleccionando 
el marco o conjunto de marcos que desea cambiar. Puede seleccionar un marco o 
un conjunto de marcos en la ventana de documento o utilizando el inspector de 
marcos. 

Cuando seleccione un marco o el conjunto de marcos, aparecerán líneas de 
selección en el inspector de marcos y en la ventana de documentos. 
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Usar el inspector de marcos 

El inspector de marcos proporciona una representación visual de los marcos del 
documento. Puede hacer clic en un marco o conjunto de marcos en el inspector de 
marcos para seleccionarlo en el documento y, seguidamente, ver o editar las 
propiedades del elemento seleccionado en el inspector de propiedades. Consulte 
“Propiedades de marco y conjunto de marcos”, en la página 271. 

El inspector de marcos también muestra la jerarquía de la estructura del conjunto 
de marcos de una manera que puede no percibirse en la ventana de documento. 
En el inspector de marcos, el conjunto de marcos está rodeado por un borde 
grueso tridimensional; los marcos están rodeados por una línea delgada gris; 
mientras que los distintos marcos se identifican a través de sus nombres. 
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Para mostrar el inspector de marcos, lleve a cabo una de estas operaciones: 

• Elija Ventana > Marcos. 

• Pulse Ctrl+FlO (Windows) o Comando+FlO (Macintosh). 

Para seleccionar un marco en el inspector de marcos: 

Haga clic en el marco en el inspector de marcos. 

Para seleccionar un conjunto de marcos en el inspector de marcos: 

Haga clic en el borde que rodea a los marcos en el inspector de marcos. 
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Seleccionar un marco o un conjunto de marcos en la ventana de 
documento 

En la ventana de documento, cuando se selecciona un marco, sus bordes se 
muestran con un contorno de línea de puntos; cuando se selecciona un conjunto 
de marcos, todos los bordes de los marcos contenidos en el conjunto de marcos se 
muestran con un contorno de línea de puntos. 

Seleccione marcos y conjuntos de marcos para cambiar sus propiedades. El 
inspector de propiedades muestra las propiedades del marco o conjunto de marcos 
seleccionado. Consulte “Propiedades de marco y conjunto de marcos”, en la 
página 271. 


Para seleccionar un marco en la ventana de documento: 

Haga clic dentro de un marco mientras mantiene pulsada la tecla Alt (Windows) o 
las teclas Opción-Mayús (Macintosh). 


Para seleccionar un conjunto de marcos en la ventana de documento: 

Haga clic en el borde de un marco de la ventana de documento. 

Para mover la selección a otro marco, lleve a cabo alguna de estas operaciones: 

• Para mover la selección al marco siguiente, 

Pulse Alt (Windows) o Comando (Macintosh) más la tecla de flecha izquierda 
o derecha. 

• Para mover la selección al conjunto de marcos padre, 

Pulse Alt (Windows) o Comando (Macintosh) más la tecla de flecha arriba. 

• Para mover la selección al marco hijo, 

Pulse Alt (Windows) o Comando (Macintosh) más la tecla de flecha abajo. 


Guardar archivos de marco y conjunto de 
marcos 

Es preciso guardar un archivo de conjunto de marcos y sus archivos relacionados 
para poder obtener una vista previa de la página en un explorador. Puede guardar 
de forma individual una página del conjunto de marcos o una página de marco, o 
bien guardar todos los archivos de marco abiertos y la página de conjunto de 
marcos. 

Cuando se utiliza Dreamweaver para crear documentos de marco, cada nuevo 
documento de marco recibe un nombre de archivo temporal (por ejemplo, 
UntitledFrame_l para la página de conjunto de marcos, Untitled-1, Untitled-2, 
etc. para las páginas de marcos). 
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Al seleccionar alguna de las opciones de almacenamiento, se abre el cuadro de 
diálogo Guardar archivo para que pueda guardar el documento con su nombre de 
archivo temporal. Dado que todos los archivos tienen por nombre “untitled” (sin 
título), es difícil precisar qué archivo de marco se está guardando. Observe las 
líneas de selección de marcos en la ventana de documento para identificar el 
documento que se está guardando actualmente. El área seleccionada identifica al 
marco al que se hace referencia actualmente en el cuadro de diálogo Guardar 
archivo. 


Guardar un archivo de conjunto de marcos 


Para guardar un archivo de conjunto de marcos, elija una de las siguientes 
opciones: 

• Para guardar el archivo de conjunto de marcos, elija Archivo > Guardar 
conjunto de marcos. 

• Para guardar el archivo de conjunto de marcos como un archivo nuevo, elija 
Archivo > Guardar conjunto de marcos como. 


Guardar un archivo de conjunto de marcos 

Para guardar un documento que se encuentra dentro de un marco, haga clic en el 
marco y, seguidamente, elija Archivo > Guardar. 


Guardar todos los archivos de un conjunto de marcos 

Para guardar todos los documentos abiertos, incluidos los documentos 
individuales, los documentos de marcos y los documentos de conjuntos de 
marcos, elija Archivo > Guardar todo. 

Nota: Utilice las líneas de selección de marcos de la ventana de documento para identificar 
los documentos de conjunto de marcos o los documentos de marcos al guardar los archivos. 


Propiedades de marco y conjunto de marcos 

Los marcos y los conjuntos de marcos disponen de su propio inspector de 

propiedades. 

• Las propiedades de marco determinan el nombre del marco, el archivo de 
origen, los márgenes, el desplazamiento, el cambio de tamaño y los bordes de 
los distintos marcos de un conjunto de marcos. 

• Las propiedades de conjunto de marcos controlan las dimensiones de los 
marcos y el color y la anchura de los bordes entre los marcos. 
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Para ver las propiedades de un marco: 

1 Elija Ventana > Propiedades para que aparezca el inspector de propiedades si es 
que no está ya>abierto. 

2 Lleve a cabo una de estas operaciones: 

• Mientras pulsa la tecla Alt (Windows) o las teclas Opción-Mayús (Macintosh), 
haga clic en un marco. 

• Haga clic en un marco en el inspector de marcos. 


Configurar propiedades de marco 

Utilice el inspector de propiedades de marco para asignar un nombre a un marco y 
definir sus bordes y sus márgenes. Para ver todas las propiedades de marco 
siguientes, haga clic en la flecha de ampliación, situada en la esquina inferior 
derecha del inspector de propiedades. 

Para especificar propiedades de marco: 

1 Seleccione un marco mediante la realización de una de las siguientes 
operaciones: 

• Haga clic en un marco en el inspector de marcos. 

• Mientras pulsa la tecla Alt (Windows) o las teclas Opción-Mayús (Macintosh), 
haga clic en un marco en la ventana de documento. 

2 Elija Ventana > Propiedades para abrir el inspector de propiedades. Haga clic en 
la flecha de ampliación, situada en la esquina inferior derecha, para ver todas las 
propiedades. 
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3 Para asignar un nombre al marco, escríbalo en el campo Marco. 
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Nota Marco determina el nombre del marco actual para usar como destino de 
hipervínculos y referencias de secuencias de comandos. El nombre de un marco tiene 
que estar formado por una sola palabra. Se admite el carácter de subrayado o guión 
bajo (_), pero no los guiones (-), los puntos (.) ni los espacios. Los nombres de marcos 
deben comenzar con una letra (no con un número). No utilice palabras reservadas de 
JavaScript (como top o navigator) para los nombres de los marcos. 

4 Elija una de las siguientes opciones de marco: 

• Orig determina el documento de origen del marco. Introduzca un nombre de 
archivo o haga clic en el icono de la carpeta para examinar y seleccionar el 
archivo. También puede abrir un archivo en un marco colocando el cursor en el 
marco y eligiendo Archivo > Abrir en marco. 

• Desplaz. determina si aparecerán barras de desplazamiento cuando no haya 
suñciente espacio para mostrar todo el contenido del marco actual. La 
configuración predeterminada de la mayoría de los exploradores es Automático. 

• Mismo tamaño restringe el tamaño del marco actual e impide que los usuarios 
puedan arrastrar los bordes del marco. Siempre podrá cambiar el tamaño de los 
marcos en la ventana de documento; sin embargo, si esta seleccionada esta 
opción, los usuarios no podrán cambiar el tamaño de los marcos en sus 
exploradores. 

• Bordes controla el borde del marco actual. Las opciones posibles son Sí, No y 
Predeterminado. Al elegir una de estas opciones, se anula la configuración de 
borde definida para el conjunto de marcos. (Consulte “Configurar propiedades 
de conjunto de marcos”, en la página 274.) La configuración predeterminada 
de la mayoría de los exploradores es Sí. Un borde sólo puede desactivarse si 
todos los marcos contiguos están configurados con la opción No (o con la 
opción Predeterminado, y el conjunto de marcos padre configurado en No). 

• Color de borde establece un color de borde para todos los bordes contiguos al 
marco actual. Esta opción de configuración anula el color de borde del 
conjunto de marcos. 

5 Configure las siguientes opciones de márgenes (si las opciones de márgenes no 
están visibles, haga clic en la flecha de ampliación situada en la esquina inferior 
derecha). 

Ancho del margen Establece la anchura en píxeles de los márgenes izquierdo y 
derecho (es decir, del espacio que hay entre el borde del marco y su contenido). 

Alto del margen Establece la altura en píxeles de los márgenes superior e 
inferior (es decir, del espacio que hay entre el borde del marco y su contenido). 
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Configurar propiedades de conjunto de marcos 

Utilice las propiedades de conjuntos de marcos para establecer los bordes y el 
tamaño de los marcos. Al configurar una propiedad de borde, se anula la 
configuración de dicha propiedad correspondiente a un conjunto de marcos. Por 
ejemplo, al configurar las propiedades de bordes de un marco, se anulan las 
propiedades de bordes establecidas en un conjunto de marcos. 

Los conjuntos de marcos predefinidos se utilizan para aplicar rápidamente un 
conjunto de marcos a un documento. Los conjuntos de marcos predefinidos 
comparten los siguientes valores predeterminados de propiedades: sin bordes, sin 
barras de desplazamiento y sin cambio de tamaño de marcos al mostrarse en un 
explorador. Para cambiar los valores predeterminados, seleccione las opciones 
deseadas en el inspector de propiedades: 

Para ver las propiedades de un conjunto de marcos: 

1 Elija Ventana > Propiedades para que aparezca el inspector de propiedades si es 
que no está ya abierto. 

2 Lleve a cabo una de estas operaciones: 

• Haga clic en un borde situado entre dos marcos de la ventana de documento. 

• Haga clic en el borde que rodea a los marcos en el inspector de marcos. 

3 Para ver todas las propiedades del conjunto de marcos, haga clic en la flecha de 
ampliación, situada en la esquina inferior derecha del inspector de propiedades. 
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Para especificar propiedades de conjunto de marcos: 

1 Seleccione un conjunto de marcos. 

2 En el menú emergente Bordes, seleccione si desea que se muestren los bordes 
alrededor de los marcos cuando el documento se visualice en un explorador. 

• Si desea que se vean los bordes, seleccione Sí. 

• Si no desea que se vean los bordes, seleccione No. 

• Si desea que el explorador determine si deben mostrarse o no los bordes, 
seleccione Predeterminado. 

3 En el campo Ancho del borde, escriba un número para especificar la anchura de 
los bordes en el conjunto de marcos actual. Introduzca 0 para especificar sin 
bordes. 

4 En el campo Color de borde, escriba el valor hexadecimal de un color o utilice 
el selector de color para elegir el color del borde. 

5 Para seleccionar las opciones de tamaño de marco, haga clic en las fichas del 
cuadro Selección FilaCol para seleccionar una fila o en las fichas de la parte 
superior para elegir una columna. A continuación escriba un número en el 
campo Valor para establecer el tamaño de la fila o columna seleccionada; en el 
menú emergente Unidades, defina la unidad de medida en la que se expresa el 
número del campo Valor. 


Asignar nombre a un conjunto de marcos 

Agregue un título a una página de conjunto de marcos mediante la opción 

Propiedades de la página. 

Para asignar un nombre a una página de conjunto de marcos: 

1 Seleccione un conjunto de marcos mediante la realización de una de las 
siguientes operaciones: 

• Haga clic en el borde del conjunto de marcos en el inspector de marcos. 

• Mientras pulsa la tecla Alt (Windows) o las teclas Opción-Mayús (Macintosh), 
haga clic en un marco en la ventana de documento. Puede que tenga que pulsar 
Alt (Windows) o Comando (Macintosh) más la tecla de flecha arriba para 
seleccionar el conjunto de marcos. 

2 Elija Modificar > Propiedades de la página. 

3 En el campo Título, introduzca un nombre para el documento. 
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Especificar tamaños de marco 

Arrastre el borde de un marco en la ventana de documento para establecer los 
tamaños aproximados de los marcos; luego, use el inspector de propiedades para 
especificar la cantidad de espacio que el explorador debe asignar a un marco 
cuando el tamaño de la pantalla no permita mostrar los marcos con su tamaño 
completo. 


Para especificar los tamaños de los marcos: 

1 Haga clic en el borde de un marco para seleccionar el conjunto de marcos. 
Elija Ver > Bordes de marco si los bordes no están visibles. 

2 En el inspector de propiedades, haga clic en la flecha de ampliación para ver 
todas las propiedades. 

3 En el cuadro Selección FilaCol, haga clic en la fila o columna que desea 
modificar. 



4 Para especificar cómo debe asignarse el espacio cuando se cambia el tamaño de 
la ventana del explorador, introduzca un número en el campo Valor y elija una 
unidad entre las siguientes opciones: 

• Píxeles establece el tamaño de la columna o fila seleccionada en un valor 
absoluto. Esta opción es la mejor de las posibles para un marco que siempre 
tiene que tener el mismo tamaño, como una barra de exploración. Si se 
establece una opción de Unidades diferente para otros marcos, a éstos 
solamente se les asignará espacio cuando los marcos que se han especificado en 
píxeles ya tengan su tamaño exacto. 

• Porcentaje indica que el marco actual debe ocupar un porcentaje especificado 
del conjunto de marcos al que pertenece. A los marcos especificados con la 
opción Porcentaje como unidad, se les asigna espacio después de aquellos 
especificados en píxeles, pero antes de los marcos con la opción Relativo como 
unidad. 

• Relativo indica que al marco actual se le asignará espacio proporcionalmente al 
asignado a otros marcos. A los marcos con las unidades establecidas en Relativo 
se les asigna espacio después de asignárselo a los marcos con el tamaño 
especificado en píxeles y en porcentaje, pero ocuparán todo el espacio restante 
de la ventana del explorador. 
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Configurar bordes de marco y conjunto de marcos 

Puede especificar la apariencia que los bordes de los marcos y los conjuntos de 

marcos deben tener en un documento. Cuando se especifican opciones de bordes 

para un marco, se anulan las opciones correspondientes del conjunto de marcos. 

Para definir bordes de marco: 

1 Seleccione el marco haciendo clic mientras se mantiene pulsada la tecla Alt 
(Windows) o las teclas Opción-Mayús (Macintosh) o haga clic en el marco en 
el inspector de marcos. 

2 Configure las siguientes opciones en el inspector de propiedades: 

• Bordes controla el borde de los marcos actuales. Las opciones posibles son Sí, 
No y Predeterminado. La configuración predeterminada de la mayoría de los 
exploradores es Sí. Un borde sólo puede desactivarse si todos los marcos 
contiguos están configurados con la opción No (o con la opción 
Predeterminado, y el conjunto de marcos padre configurado en No). 

• Color de borde establece un color de borde para todos los bordes contiguos al 
marco actual. 

Para definir bordes de conjunto de marcos: 

1 Seleccione el conjunto de marcos haciendo clic en el borde de un marco en la 
ventana de documento o haciendo clic en el borde que encierra los marcos en el 
inspector de marcos. 

2 Configure las siguientes opciones en el inspector de propiedades: 

• Bordes controla los bordes de los marcos contenidos en el conjunto de marcos 
actual. Elija Sí para mostrar los bordes en color tridimensional; No para 
mostrar los bordes planos y en color gris; o elija Predeterminado para que el 
explorador determine cómo mostrar los bordes. La configuración 
predeterminada de la mayoría de los exploradores es Sí. 

• Color de borde establece un color para todos los bordes en el conjunto de 
marcos actual. Este parámetro puede anularse para un marco concreto 
mediante la configuración de un color de borde para el marco en cuestión. 

• Ancho del borde especifica la anchura de los bordes en el conjunto de marcos 
actual. Introduzca 0 para especificar sin bordes. 
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Cambiar el color de fondo de un marco 


El color de fondo de un marco se cambia estableciendo el color de fondo del 
documento en el marco. 

Para cambiar el color de fondo de un documento en un marco: 

1 Lleve a cabo una de estas operaciones: 

• Coloque el cursor en el marco y elija Modificar > Propiedades de la página. 

• Haga clic con el botón derecho del ratón (Windows) o haga clic manteniendo 
pulsada la tecla Control (Macintosh) dentro del marco y elija Propiedades de la 
página en el menú contextual. 

2 Haga clic en el menú emergente Fondo para seleccionar un color. 

Controlar el contenido del marco con vínculos 

Utilice el menú emergente Destino del inspector de propiedades para seleccionar 
un marco en el que se abrirá un archivo. Puede establecer que se abra un archivo 
en una ventana nueva, reemplazar la información existente en el mismo marco que 
el vínculo y reemplazar la información de otro marco. 

Puede hacer que el contenido de un vínculo sobrescriba el marco actual o que 
aparezca en una ventana de explorador totalmente nueva. 

Para asignar un marco como destino: 

1 Seleccione texto o un objeto. 

2 En el campo Vínculo del inspector de propiedades, lleve a cabo una de estas 
operaciones: 

• Escriba el nombre del archivo con el que debe establecerse el vínculo. 

• Haga clic en el icono de carpeta y seleccione el archivo con el que debe 
establecerse el vínculo. 

• Haga clic en el icono de señalización de archivo y arrástrelo para seleccionar el 
archivo con el que debe establecerse el vínculo. 

Para especificar un punto de fijación en el archivo con el que debe establecerse 
el vínculo, introduzca un signo de almohadilla (#) antes del nombre del punto 
de fijación. Consulte “Establecer un vínculo con un punto de fijación con 
nombre”, en la página 119. 
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3 En el menú emergente Destino, elija el destino en el que se mostrará el 
documento vinculado. 

• blank abre el documento vinculado en una nueva ventana del explorador y 
conserva la ventana actual. 

• parent abre el documento vinculado en el conjunto de marcos padre del enlace. 

• self abre el vínculo en el marco actual y sustituye al contenido de dicho marco. 

• _top abre el vínculo en el conjunto de marcos de nivel más alto del documento 
actual y sustituye a todos los marcos. 

• Si asignó nombres a los marcos en el inspector de propiedades, sus nombres 
aparecerán en este menú. Al seleccionar un marco con nombre, se abre el 
documento vinculado en el marco seleccionado. 


Crear contenido SIN MARCOS 

Dreamweaver permite especificar contenido para visualizar en exploradores 
antiguos o basados en texto que no admiten marcos. Dreamweaver inserta el 
contenido especificado en el documento del conjunto de marcos mediante una 
instrucción similar a la siguiente: 

<noframesxbody bgcolor="#FFFFFF"> 
este es el contenido sin marcos. 

</body> </noframes> 

Cuando un explorador que no admite marcos carga un archivo de conjunto de 
marcos, solamente mostrará el contenido SIN MARCOS. 


Para definir contenido SIN MARCOS: 

1 Elija Modificar > Conjunto de marcos > Editar contenido sin marcos. 

Dreamweaver borra la ventana de documento, al tiempo que aparecen las 
palabras "Contenido sin marcos" en la parte superior del área del cuerpo del 
documento. 

2 Para crear el contenido sin marcos, lleve a cabo una de estas operaciones: 

• En la ventana de documento, escriba o inserte el contenido. 

• Elija Ventana > Fuente HTML y escriba el contenido o el código HTML del 
contenido entre las etiquetas <noframes>. 

3 Vuelva a elegir Modificar > Conjunto de marcos > Editar contenido sin marcos 
para volver a la vista normal del documento de conjunto de marcos. 
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Usar comportamientos con marcos 

Puede aplicar diversos comportamientos que aprovechan el funcionamiento de los 
marcos. Los marcos se utilizan generalmente cuando el diseñador de la página 
Web desea controlar la forma en que se muestra el contenido en una página Web. 
Existen diversos comportamientos que facilitan el cambio del contenido de un 
marco. 

• Deñnir texto de marco reemplaza el contenido y el formato de un marco con el 
contenido que usted especifique. Dicho contenido puede incluir cualquier 
código HTML. Utilice esta acción para mostrar información de forma 
dinámica. Consulte “Definir texto de marco”, en la página 323. 

• Ir a URL abre una nueva página en la ventana actual o en el marco especificado. 
Esta acción resulta especialmente útil para cambiar el contenido de dos o más 
marcos con un solo clic. Consulte “Ir a URL”, en la página 316. 

• Insertar barra de exploración se utiliza para dirigir a un usuario hacia páginas 
concretas de un sitio Web. Puede agregar comportamientos a las imágenes de la 
barra de exploración y definir la imagen que debe mostrarse en función de las 
acciones del usuario. Por ejemplo, puede que desee mostrar una imagen de 
botón en su estado pulsado y sin pulsar para indicar al usuario qué página del 
sitio está viendo. Consulte “Insertar una barra de exploración”, en la 

página 125. 

Insertar menú de salto Le permite configurar una lista de menú emergente con 
vínculos que abren archivos en una ventana del explorador al hacer clic en ellos. 
También puede definir como destino una ventana o un marco concreto para que 
se abra en él el documento. Consulte “Insertar un menú de salto”, en la 
página 122. 
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CAPÍTULO 11 

Insertar medios 


Para insertar un applet de Java, una película Shockwave, una película Flash, un 
control ActiveX u otros objetos de audio o vídeo en una página, lleve a cabo una 
de las siguientes operaciones: 

• Sitúe el cursor de inserción en el lugar donde desea que aparezca el objeto y 
haga clic en el botón que resulte adecuado de la paleta de objetos. 

• Arrastre el correspondiente botón de la paleta de objetos hasta el lugar en el que 
desea que aparezca el objeto en la ventana de documento. 

• Sitúe el punto de inserción y, seguidamente, elija el objeto en cuestión del 
submenú Insertar > Medio. 

En la mayoría de los casos, aparecerá un cuadro de diálogo que le permitirá 
seleccionar un archivo de origen y especificar diversos parámetros para el objeto de 
medio. Para evitar que aparezcan dichos cuadros de diálogo, elija Edición > 
Preferencias y anule la selección de la opción Mostrar diálogo al insertar objetos. 

Cada botón de la paleta de objetos inserta el código fuente HTML necesario para 
que el objeto aparezca en la página. Use el inspector de propiedades para 
especificar el archivo de origen, las dimensiones y otros parámetros. 
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Iniciar un editor de medios externo 


Puede hacer doble clic en cualquier archivo de la ventana Sitio para editar dicho 
archivo. Si el archivo es HTML, se abrirá en Dreamweaver. Si se trata de otro tipo 
de archivo, como un archivo de imagen o un archivo de película Flash, se abrirá en 
el editor externo correspondiente, como Fireworks o Flash. 

Cada tipo de archivo se asocia a uno o varios editores externos. El editor que se 
inicia al hacer doble clic en el archivo en la ventana Sitio se denomina 
editor principal. 

Si hay varios editores asociados al tipo de archivo, podrá iniciar un editor 
secundario para un archivo concreto: haga clic con el botón derecho del ratón 
(Windows) o haga clic mientras mantiene pulsada la tecla Control (Macintosh) en 
el nombre del archivo en la ventana Sitio y elija un editor del submenú Abrir con 
del menú contextual. 

En la mayoría de los casos, el editor principal es la misma aplicación que se 
iniciaría si hiciera doble clic sobre el icono del archivo en el escritorio. Para 
especificar de forma explícita qué editores externos deben iniciarse para un tipo de 
archivo concreto, elija Edición > Preferencias y seleccione Editores externos de la 
lista Categoría. Las extensiones de nombres de archivo, como .gif, .wav y .mpg, se 
enumeran a la izquierda bajo Extensiones. Los editores asociados para una 
extensión seleccionada se enumeran en la parte derecha, bajo Editores. 

Para iniciar el editor principal para una imagen incluida en un documento 
HTML, pulse Control y haga doble clic (Windows) o pulse Comando y haga 
doble clic (Macintosh) en la imagen en la ventana de documento. Tenga en cuenta 
que este método para iniciar un editor sólo funciona para las imágenes, no para 
otros medios incrustados en un documento. 

Para agregar un tipo de archivo a la lista de extensiones en las preferencias de 
Editores externos: 

1 Haga clic en el botón de signo más (+) situado encima de la lista de extensiones. 

2 Introduzca una extensión de nombre de archivo (incluido el punto situado al 
principio de la extensión) o varias extensiones relacionadas separadas por 
espacios. 

Para agregar un editor para un tipo de archivo concreto: 

1 Seleccione la extensión correspondiente al tipo de archivo en la lista 
Extensiones. 

2 Haga clic en el botón de signo más (+) situado encima de la lista Editores. 

3 En el cuadro de diálogo que aparece a continuación, elija la aplicación que 
desea agregar a la lista Editores. 
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Para eliminar un tipo de archivo de la lista: 

1 Seleccione el tipo de archivo correspondiente de la lista Extensiones. 

Nota: No es posible deshacer la eliminación de un tipo de archivo de la lista, por lo que 
debe asegurarse de que efectivamente no necesita el tipo de archivo en cuestión antes de 
eliminarlo. 

2 Haga clic en el botón de signo menos (-) situado encima de la lista de 
extensiones. 

Para anular la asociación de un editor a un tipo de archivo: 

1 Seleccione el tipo de archivo correspondiente de la lista Extensiones. 

2 Seleccione el editor de la lista Editores. 

3 Haga clic en el botón de signo menos (-) situado encima de la lista Editores. 

Para convertir a un editor en el editor principal para un tipo de archivo: 

1 Seleccione el tipo de archivo. 

2 Seleccione el editor (o agregúelo si no está en la lista). 

3 Haga clic en el botón Convertir en principal. 

Usar Design Notes con objetos de medios 

Al igual que ocurre con otros objetos de Dreamweaver, puede agregar Design 
Notes (notas de diseño) a un objeto de medios. 

Para agregar Design Notes a un objeto de medios: 

1 Haga clic con el botón derecho del ratón (Windows) o haga clic mientras pulsa 
la tecla Control (Macintosh) en el objeto en la ventana de documento. 

2 Elija Design Notes del menú contextual. 

3 Introduzca sus Design Notes. Si desea más información, consulte “Design 
Notes”, en la página 172. 
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Insertar películas Shockwave 

Shockwave, el estándar de Macromedia para multimedia interactivo en la Web, es 
un formato comprimido que permite la descarga rápida de los archivos de medios 
creados en Macromedia Director y su reproducción en los exploradores de uso 
más frecuente. 

El software que reproduce las películas Shockwave está disponible tanto como 
plug-in para Netscape Navigator como en formato de control ActiveX. Cuando se 
inserta una película Shockwave, Dreamweaver usa tanto la etiqueta OBJECT (para el 
control ActiveX) como la etiqueta EMBED para el plug-in) para conseguir los 
mejores resultados en todos los exploradores. Al realizar cambios relativos a la 
película en el inspector de propiedades, Dreamweaver adapta los datos 
introducidos a los parámetros adecuados para las etiquetas OBJECT y EMBED. 

Para obtener resultados óptimos en todas las plataformas, utilice Macromedia 
Aftershock para agregar HTML y empaquetadores JavaScript a las películas 
Shockwave. Aftershock permite agregar diversas funciones a las películas 
Shockwave, incluida la capacidad para detectar y adaptarse al explorador y la 
versión de plug-in utilizada por los visitantes de la página Web. Para obtener más 
información sobre Aftershock, consulte “Insertar y editar objetos Aftershock”, en 
la página 288. 


Para insertar una película Shockwave: 

1 En la ventana de documento, coloque el punto de inserción en el lugar en el 
que desea insertar una película Shockwave. 

2 Haga clic en el botón Shockwave en la paleta de objetos. 

3 En el cuadro de diálogo que aparece, seleccione un archivo de película. 

4 En el inspector de propiedades, introduzca la anchura y la altura de la película 
en los cuadros An y Al. 

Estas son las únicas propiedades necesarias. Consulte “Propiedades de 
Shockwave”, en la página 285 para obtener más información sobre las demás 
propiedades. 
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Propiedades de Shockwave 

Para asegurar un resultado óptimo tanto en Microsoft Internet Explorer como en 
Netscape Navigator, Dreamweaver inserta películas Shockwave usando las dos 
etiquetas OBJECT y EMBED. (OBJECT es la etiqueta definida por Microsoft para los 
controles ActiveX; EMBED es la etiqueta definida por Netscape para plug-ins.) Para 
ver las propiedades en el inspector de propiedades, seleccione una película 
Shockwave. 

El inspector de propiedades muestra inicialmente las propiedades utilizadas con 
mayor frecuencia. Haga clic en la flecha de ampliación, situada en el ángulo 
inferior derecho, para ver todas las propiedades. 

Nombre Especifica un nombre para identificar una película en las secuencias de 
comandos. Introduzca un nombre en el campo sin título que aparece en el 
extremo izquierdo del inspector de propiedades. 

An y Al Especifican la anchura y la altura de la película en píxeles. También se 
pueden emplear las siguientes unidades: pe (picas), pt (puntos), in (pulgadas), mm 
(milímetros), cm (centímetros) o % (porcentaje del valor del objeto padre). Las 
abreviaturas deben seguir al valor sin espacio de separación: por ejemplo: 3mm. 

Archivo Especifica la ruta del archivo de la película Shockwave. Escriba una ruta o 
haga clic en el icono de carpeta para seleccionar un archivo. 

Etiqueta Determina las etiquetas usadas para identificar la película Shockwave. 
Puede elegir las dos etiquetas OBJECT yEMBED, o cualquiera de ellas por separado. Se 
recomienda emplear el valor predeterminado , OBJECT y EMBED. 

Alinear Determina cómo se alineará la película en la página. Consulte “Alinear 
elementos”, en la página 203 para obtener una descripción de las opciones 
posibles. 

Col. fondo Especifica un color de fondo para la zona de la película. Este color 
también aparecerá cuando la película no se esté reproduciendo (mientras se carga y 
después de haberse reproducido). 

ID Define el parámetro opcional ID ActiveX. El uso más frecuente de este 
parámetro es como medio de paso de información entre controles ActiveX. 

Bordes Especifica la anchura del borde alrededor de la película. 

Espacio V y Espacio H Especifican el número de píxeles de espacio en blanco que 
habrá por encima y por debajo y a derecha e izquierda de la película. 

Imagen alt (sólo para OBJECT) Especifica una imagen que se mostrará si el 
explorador del usuario no admite controles ActiveX. 

Parámetros Abre un cuadro de diálogo para introducir parámetros adicionales 
para pasar a la película Shockwave. Consulte “Parámetros”, en la página 295. La 
película Shockwave debe ser modificada para recibir estos parámetros. 
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Insertar películas Flash 

La tecnología Flash de Macromedia es la principal solución para la reproducción 
de gráficos y animaciones vectoriales. Flash Player está disponible tanto como 
plug-in de Netscape Navigator como en formato de control ActiveX para Internet 
Explorer, y ya viene incorporado en las últimas versiones de Netscape Navigator, 
Microsoft Windows 98 y del software de conexión a Internet de America Online. 

Utilice Macromedia Flash para crear películas Flash. Si utiliza Flash 3, utilice 
Aftershock para agregar secuencias de comandos y detección de versión de plug-in 
a sus películas; consulte “Insertar y editar objetos Aftershock”, en la página 288. Si 
utiliza Flash 4, utilice el comando Publish (publicar) para obtener el mismo 
resultado. 

Cuando se inserta una película Flash en un documento, Dreamweaver usa tanto la 
etiqueta OBJECT (definida por Microsoft para los controles ActiveX), como la 
etiqueta EMBED (definida por Netscape) para ofrecer los mejores resultados en 
ambos exploradores. Al realizar cambios relativos a la película en el inspector de 
propiedades, Dreamweaver adapta los datos introducidos a los parámetros 
adecuados para las etiquetas OBJECT y EMBED. 

Nota: Si inserta una película mediante un objeto Flash, la película sólo podrá verse con Flash 
Player 4 aunque haya utilizado Flash 3 para crearla. Flash Player 3 y otras versiones 
anteriores no muestran las películas insertadas con el objeto Flash. Los visitantes de la página 
que utilicen Flash Player 3 o versiones anteriores recibirán un mensaje en el que se les 
informará de que deben actualizar a Flash Player 4. 


Para insertar una película Flash: 

1 En la ventana de documento, coloque el punto de inserción en el lugar en el 
que desea insertar la película. 

2 Haga clic en el botón Flash en la paleta de objetos. 

3 En el cuadro de diálogo que aparece, seleccione un archivo de película Flash. 

4 En el inspector de propiedades, introduzca la anchura y la altura de la película 
en los cuadros An y Al. 

Estas son las únicas propiedades necesarias. Consulte “Propiedades de películas 
Flash”, en la página 287 para obtener más información sobre las demás 
propiedades. 
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Propiedades de películas Flash 

Para asegurar los mejores resultados tanto en Internet Explorer como en Netscape 
Navigator, Dreamweaver inserta películas Flash usando las dos etiquetas OBJECT y 
EMBED. (OBJECT es la etiqueta definida por Microsoft para los controles ActiveX; 
EMBED es la etiqueta definida por Netscape para plug-ins.) Para ver las siguientes 
propiedades en el inspector de propiedades, seleccione una película Flash. 

El inspector de propiedades muestra inicialmente las propiedades utilizadas con 
mayor frecuencia. Haga clic en la flecha de ampliación, situada en el ángulo 
inferior derecho, para ver todas las propiedades. 

Nombre Especifica un nombre para identificar una película en las secuencias de 
comandos. Introduzca un nombre en el campo sin título que aparece en el 
extremo izquierdo del inspector de propiedades. 

An y Al Especifican la anchura y la altura de la película en píxeles. También se 
pueden emplear las siguientes unidades: pe (picas), pt (puntos), in (pulgadas), mm 
(milímetros), cm (centímetros) o % (porcentaje del valor del objeto padre). Las 
abreviaturas deben seguir al valor sin espacio de separación: por ejemplo: 3mm. 

Archivo Especifica la ruta del archivo de la película Flash. Escriba una ruta o haga 
clic en el icono de carpeta para seleccionar un archivo. 

Etiqueta Determina las etiquetas usadas para identificar la película. Puede elegir 
las dos etiquetas, OBJECT y EMBED, o cualquiera de ellas por separado. Se 
recomienda emplear el valor predeterminado , OBJECT y EMBED. 

Alinear Determina cómo se alineará la película en la página. Consulte “Alinear 
elementos”, en la página 203 para obtener una descripción de las opciones 
posibles. 

Col. fondo Especifica un color de fondo para la zona de la película. Este color 
también aparecerá cuando la película no se esté reproduciendo (mientras se carga y 
después de haberse reproducido). 

ID Define el parámetro opcional ID ActiveX. El uso más frecuente de este 
parámetro es como medio de paso de información entre controles ActiveX. 

Bordes Especifica la anchura del borde alrededor de la película. 

Espacio V y Espacio H Especifican el número de píxeles de espacio en blanco que 
habrá por encima y por debajo y a derecha e izquierda de la película. 

Imagen alt (sólo para OBJECT) Especifica una imagen que se mostrará si el 
explorador del usuario no admite controles ActiveX. 

Parámetros Abre un cuadro de diálogo para introducir parámetros adicionales 
para pasar a la película. Consulte “Parámetros”, en la página 295. La película debe 
ser modificada para recibir estos parámetros. 
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Calidad Establece el parámetro QUALITY para las etiquetas OBJECT y EMBED que 
ejecutan la película. Consulte la documentación de Flash, en la que se describen 
las opciones posibles. Las posibilidades son Baja, Baja automática, Alta automática 
y Alta. 

Escala Establece el parámetro SCALE para las etiquetas OBJECT y EMBED que ejecutan 
la película. Consulte la documentación de Flash, en la que se describen las 
opciones posibles. 

Rep. Autom. Reproduce automáticamente la película cuando se carga la página. 
Bucle Reproduce la película indefinidamente. 


Insertar y editar objetos Aftershock 

Aftershock es una utilidad de Macromedia que se incluye como parte del paquete 
de Director. Aftershock genera HTML y JavaScript que se asocia a las películas 
Shockwave y Flash; puede utilizarse, por ejemplo, para detectar la versión de plug- 
in utilizada por los visitantes de la página Web y proporcionar el contenido 
adecuado. En Dreamweaver se pueden abrir los archivos creados con Aftershock y 
luego pegar su contenido en otros documentos de Dreamweaver. Para editar 
objetos de Aftershock, instale Aftershock en su sistema, seleccione código HTML 
generado por Aftershock en un documento y, seguidamente, haga clic en Iniciar 
Aftershock en el inspector de propiedades. 

En Flash 4, Aftershock ha sido sustituido por la función Publish (publicar). No 
obstante, Aftershock continúa siendo útil para aquellos usuarios que utilicen Flash 
3 o Director. 

Para insertar objetos Aftershock en Dreamweaver: 

1 En Dreamweaver, abra un archivo HTML creado por Aftershock. 

Los elementos de Aftershock aparecen como objetos no editables en 
Dreamweaver. Si un objeto incluye una imagen de vista previa, Dreamweaver la 
mostrará. 

2 Copie el contenido del archivo y pegúelo en otro documento de Dreamweaver. 

Para editar un objeto Aftershock: 

1 Seleccione un objeto Aftershock para abrir el inspector de propiedades. 

2 Haga clic en el botón Iniciar Aftershock. 

3 Edite el archivo en Aftershock, guarde los cambios y salga de la utilidad. 

Al salir de Aftershock, Dreamweaver actualiza el contenido del objeto 
Aftershock con la nueva información. 
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Insertar objetos Generator 

Macromedia Generator ofrece una forma de proporcionar contenido Web 
dinámico. Puede crear archivos Generator con Flash 4 mediante las plantillas de 
creación gratuitas de Generator; los archivos se encontrarán disponibles 
posteriormente en un servidor Web al ejecutar el software de servidor Generator. 
Puede insertar un objeto Generator en un documento de Dreamweaver. 

Para insertar un objeto Generator: 

1 En la ventana de documento, coloque el punto de inserción en el lugar en el 
que desea insertar el objeto. 

2 Haga clic en el botón Generator en la paleta de objetos. 

3 En el cuadro de diálogo que aparece, seleccione un archivo de plantilla de 
Generator (.swt). 

4 Si lo desea, haga clic en el botón de signo más (+) para agregar un par de 
parámetros nombre=valor. Seguidamente, introduzca un nombre para el 
parámetro en el campo Nombre y un valor en el campo Valor. Repita este paso 
por cada parámetro. 

5 Para eliminar un parámetro, selecciónelo de la lista Parámetros y haga clic en 
el botón de signo menos (-). 

6 Cuando termine de introducir parámetros, haga clic en Aceptar para insertar el 
objeto Generator. 

Para editar los parámetros después de haber insertado el objeto Generator, utilice 
el inspector de código Fuente HTML. 

El servidor de Generator intenta obtener valores para introducirlos en la plantilla 
desde un archivo de base de datos; si no hay ningún archivo de base de datos 
disponible, el servidor utilizará los pares nombre=valor que usted introdujo aquí al 
insertar el objeto. 
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Insertar contenido de plug-ins de Netscape 
Navigator 

Los plug-ins mejoran Netscape Navigator al proporcionar maneras de ver 
contenido de medios en un amplia gama de formatos. 

Después de crear contenido para un plug-in de Navigator, puede utilizar 
Dreamweaver para insertar dicho contenido en un documento HTML. 
Dreamweaver utiliza la etiqueta EMBED para marcar la referencia al archivo de 
contenido. 

Para insertar contenido de plug-ins de Netscape Navigator: 

1 En la ventana de documento, coloque el punto de inserción en el lugar en el 
que desea insertar el contenido. 

2 Haga clic en el botón Plug-in en la paleta de objetos. 

3 En el cuadro de diálogo que aparece, seleccione un archivo de contenido para 
un plug-in de Navigator. 


Propiedades de plug-in de Netscape Navigator 

Tras insertar contenido para un plug-in de Netscape Navigator, utilice el inspector 
de propiedades para definir parámetros para dicho contenido. Para ver las 
siguientes propiedades en el inspector de propiedades, seleccione un objeto de 
plug-in de Netscape Navigator. 

El inspector de propiedades muestra inicialmente las propiedades utilizadas con 
mayor frecuencia. Haga clic en la flecha de ampliación, situada en el ángulo 
inferior derecho, para ver todas las propiedades. 

Plug-in Especifica un nombre para identificar el plug-in en las secuencias de 
comandos. Introduzca un nombre en el campo sin título que aparece en el 
extremo izquierdo del inspector de propiedades. 

An y Al Especifican, en píxeles, la anchura y la altura que se ha asignado al objeto 
en la página. También se pueden emplear las siguientes unidades: pe (picas), pt 
(puntos), in (pulgadas), mm (milímetros), cm (centímetros) o % (porcentaje del 
valor del objeto padre). Las abreviaturas deben seguir al valor sin espacio de 
separación: por ejemplo: 3mm. 

Orig Especifica el archivo de datos de origen. Introduzca un nombre de archivo o 
haga clic en el icono de carpeta para seleccionar un archivo. 

Url plg Especifica el URL del atributo PLUGINSPAGE. Introduzca el URL completo 
del sitio desde el que los usuarios pueden descargar el plug-in. Si el usuario que 
está viendo la página no tiene el plug-in, el explorador intentará descargarlo desde 
este URL. 
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Alinear Determina cómo se alineará el objeto en la página. Consulte “Alinear 
elementos”, en la página 203 para obtener una descripción de las opciones 
posibles. 

Espacio V y Espacio H Especifican el número de píxeles de espacio en blanco que 
habrá por encima y por debajo y a derecha e izquierda del plug-in. 

Bordes Especifica la anchura del borde alrededor del plug-in. 

Parámetros Abre un cuadro de diálogo para introducir parámetros adicionales y 
pasarlos al plug-in de Netscape Navigator. Consulte “Parámetros”, en la 
página 295. Muchos plug-ins responden a parámetros especiales. El plug-in Flash, 
por ejemplo, incluye parámetros para BGCOLOR, SALIGN y SCALE. 


Reproducir plug-ins en la ventana de 
documento 

Puede obtener una vista previa de las películas y animaciones basadas en plug-ins 
de Navigator, es decir, los elementos que usan la etiqueta EMBED, directamente en 
la ventana de documento. (No es posible obtener vistas previas de películas o 
animaciones basadas en controles ActiveX en la ventana de documento.) Pueden 
reproducir todos los elementos a la vez para ver el aspecto que presentará la página 
ante el usuario, o bien puede reproducirlos uno por uno para asegurarse de que se 
han incrustado los elementos de medio correctos. 

Para reproducir películas, deben instalarse en el sistema los plug-ins adecuados. Al 
iniciarse, Dreamweaver busca automáticamente todos los plug-ins instalados, 
primero en la carpeta Configuration/Plugins y luego en las carpetas de plug-ins de 
todos los exploradores instalados. 

Para reproducir el contenido de plug-ins en la ventana de documento: 

1 Inserte uno o más elementos de medios eligiendo Insertar > Medio > 
Shockwave, Insertar > Medio > Flash o Insertar > Medio > Plug-in. 

2 Reproducir contenido de plug-ins: 

• Seleccione uno de los elementos de medios que ha insertado y elija Ver > Plug- 
ins > Reproducir. 

• Elija Ver > Plug-ins > Reproducir todo para reproducir todos los elementos de 
medios de la página basada en los plug-ins. 


Para detener la reproducción del contenido de plug-ins: 

Seleccione un elemento de medios y elija Ver > Plug-ins > Detener, o elija Ver > 
Plug-ins > Detener todo para detener la reproducción del contenido de los plug- 
ins. 
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Solucionar problemas de plug-ins de Navigator 

Si ha seguido los pasos indicados para reproducir contenido de plug-ins en la 
ventana de documento pero parte del contenido de plug-ins no se reproduce, 
inténtelo con los procedimientos siguientes: 

• Asegúrese de que el plug-in asociado está instalado en el ordenador y que el 
contenido es compatible con la versión de plug-in de la que usted dispone. 

• Abra el archivo Configuration/badplugins.cfg en un editor de texto y 
compruebe si en la lista aparece el plug-in en cuestión. El archivo 
badplugins.cfg contiene información sobre aquellos plug-ins que pueden 
provocar fallos en Dreamweaver u otros problemas graves. (Si algún plug-in 
concreto ocasiona problemas, es recomendable agregarlo a este archivo.) 

• Compruebe que el sistema disponga de la memoria suficiente (y en Macintosh, 
que haya suficiente memoria asignada a Dreamweaver). Algunos plug-ins 
necesitan entre 2 MB y 5 MB adicionales para poder ejecutarse. 


Insertar un control ActiveX 

Los controles ActiveX (antiguamente conocidos como controles OLE) son 
componentes reutilizables, semejantes a aplicaciones en miniatura, que tienen 
capacidad para actuar a modo de plug-ins de explorador. Se ejecutan en Internet 
Explorer con Windows, pero no en Macintosh ni en Netscape Navigator. El 
objeto ActiveX en Dreamweaver permite proporcionar atributos y parámetros 
para un control ActiveX del explorador del visitante. 

Dreamweaver utiliza la etiqueta OBJECT para marcar el lugar de la página en el que 
aparece el control ActiveX y para proporcionar parámetros al control ActiveX. 

Para insertar contenido de controles ActiveX: 

1 En la ventana de documento, coloque el punto de inserción en el lugar en el 
que desea insertar el contenido. 

2 Haga clic en el botón ActiveX en la paleta de objetos. 

Un icono marca el lugar de la página en el que aparecerá el control ActiveX en 
Internet Explorer. 
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Propiedades de ActiveX 

Tras insertar un objeto ActiveX, utilice el inspector de propiedades para configurar 
atributos de la etiqueta OBJECT y parámetros para el control ActiveX. Haga clic en 
Parámetros, en el inspector de propiedades, para introducir nombres y valores para 
las propiedades que no aparecen en el inspector de propiedades. No hay ningún 
formato estándar universalmente aceptado para parámetros de controles ActiveX; 
para averiguar los parámetros que debe utilizar, consulte la documentación del 
control ActiveX que está utilizando. 

El inspector de propiedades muestra inicialmente las propiedades utilizadas con 
mayor frecuencia. Haga clic en la flecha de ampliación, situada en el ángulo 
inferior derecho, para ver todas las propiedades. 

Nombre Especifica un nombre para identificar el objeto ActiveX en las secuencias 
de comandos. Introduzca un nombre en el campo sin título que aparece en el 
extremo izquierdo del inspector de propiedades. 

An y Al Especifican la anchura y la altura del objeto en píxeles. También se pueden 
emplear las siguientes unidades: pe (picas), pt (puntos), in (pulgadas), mm 
(milímetros), cm (centímetros) o % (porcentaje del valor del objeto padre). Las 
abreviaturas deben seguir al valor sin espacio de separación: por ejemplo: 3mm. 

Class ID Identifica el control ActiveX en el explorador. Introduzca un valor o elija 
uno del menú emergente. Cuando se ha cargado la página, el explorador usa el ID 
de clase para ubicar el control ActiveX que necesita el objeto ActiveX asociado a la 
página. Si el explorador no localiza el control ActiveX especificado, intentará 
descargarlo de la ubicación indicada en Base. 

Base Especifica el URL que contiene el control ActiveX. Internet Explorer 
descarga el control ActiveX de esta ubicación si no se ha instalado en el sistema del 
usuario. Si no especifica un parámetro Base y el visitante no tiene ya instalado el 
control ActiveX pertinente, el explorador no podrá mostrar el objeto ActiveX. 

Incrustar Hace que Dreamweaver agregue una etiqueta EMBED en la etiqueta 
OBJECT del control ActiveX. Si el control ActiveX tiene un plug-in de Netscape 
Navigator equivalente, la etiqueta EMBED activa el plug-in. Dreamweaver asigna los 
valores que se han introducido como propiedades de ActiveX a sus plug-ins de 
Netscape Navigator equivalentes. 

Orig Define el archivo de datos que se usará para un plug-in de Netscape 
Navigator si la opción Incrustar está activada. Si no se introduce un valor, 
Dreamweaver intentará determinar el valor a partir de las propiedades de ActiveX 
previamente introducidas. 

Alinear Determina cómo se alineará el objeto en la página. Consulte “Alinear 
elementos”, en la página 203 para obtener una descripción de las opciones 
posibles. 
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Imagen alt Especifica una imagen que debe mostrarse si el explorador no admite 
OBJECT. Esta opción sólo está disponible cuando la opción Incrustar no está 
seleccionada. 

Espacio V y Espacio H Especifican el número de píxeles de espacio en blanco que 
habrá por encima y por debajo y a derecha e izquierda del objeto. 

Datos Especifica el archivo de datos correspondiente al control ActiveX que se 
tiene que cargar. Muchos controles ActiveX, como Shockwave y RealPlayer, no 
usan este parámetro. 

ID Define el parámetro opcional ID ActiveX. El uso más frecuente de este 
parámetro es como medio de paso de información entre controles ActiveX. 

Bordes Especifica la anchura del borde alrededor del objeto. 

Parámetros Abre un cuadro de diálogo para introducir parámetros adicionales 
para pasar al objeto ActiveX. Consulte “Parámetros”, en la página 295. Muchos 
controles ActiveX responden a parámetros especiales. 


Insertar un applet de Java 

Java es un lenguaje de programación que permite el desarrollo de aplicaciones 
pequeñas ( applets ) que pueden incrustarse en páginas Web. 

Tras crear un applet de Java, podrá insertarlo en un documento HTML mediante 
Dreamweaver. Dreamweaver utiliza la etiqueta APPLET para marcar la referencia al 
archivo de applet. 

Para insertar un applet de Java: 

1 En la ventana de documento, coloque el punto de inserción en el lugar en el 
que desea insertar el applet. 

2 Haga clic en el botón Applet en la paleta de objetos. 

3 En el cuadro de diálogo que aparece, seleccione un archivo que contenga un 
applet de Java. 


Propiedades de applet de Java 

Después de insertar un applet de Java, use el inspector de propiedades para 
establecer los parámetros. Para ver las siguientes propiedades en el inspector de 
propiedades, seleccione un applet de Java. 

El inspector de propiedades muestra inicialmente las propiedades utilizadas con 
mayor frecuencia. Haga clic en la flecha de ampliación, situada en el ángulo 
inferior derecho, para ver todas las propiedades. 
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Nombre Especifica un nombre para identificar al applet en las secuencias de 
comandos. Introduzca un nombre en el campo sin título que aparece en el 
extremo izquierdo del inspector de propiedades. 

An y Al Especifican la anchura y la altura del applet en píxeles. También se pueden 
emplear las siguientes unidades: pe (picas), pt (puntos), in (pulgadas), mm 
(milímetros), cm (centímetros) o % (porcentaje del valor del objeto padre). Las 
abreviaturas deben seguir al valor sin espacio de separación: por ejemplo: 3mm. 

Código Especifica el archivo de contenido del applet. Introduzca un nombre de 
archivo o haga clic en el icono de carpeta para seleccionar un archivo. 

Base Identifica la carpeta que contiene el applet seleccionado. Al elegir un applet, 
este campo se rellena automáticamente. 

Alinear Determina cómo se alineará el objeto en la página. Consulte “Alinear 
elementos”, en la página 203 para obtener una descripción de las opciones 
posibles. 

Alt Especifica el contenido alternativo (normalmente, una imagen) que se 
mostrará si el explorador del usuario no es compatible con applets de Java o tiene 
Java desactivado. Si introduce texto, Dreamweaver lo procesará con el atributo ALT 
de la etiqueta APPLET. Si elige una imagen, Dreamweaver insertará una etiqueta IMG 
entre las etiquetas APPLET de apertura y de cierre. 

Nota: Para especificar un contenido alternativo que puedan mostrar tanto Netscape 
Navigator (con Java desactivado) como Lynx (un explorador basado en texto), seleccione 
una imagen y luego agregue manualmente un atributo ALT a la etiqueta IMG en el inspector 
de código Fuente HTML. 

Espacio V y Espacio H Especifican el número de píxeles de espacio en blanco que 
habrá por encima y por debajo y a derecha e izquierda del applet. 

Parámetros Abre un cuadro de diálogo para introducir parámetros adicionales 
para pasar al applet. Consulte “Parámetros”, en la página 295. Muchos applets 
responden a parámetros especiales. 


Parámetros 

Use el cuadro de diálogo Parámetros para introducir valores para parámetros 
especiales definidos para películas Shockwave y Flash, controles ActiveX, plug-ins 
de Netscape Navigator y applets de Java. Consulte la documentación 
correspondiente al objeto que está usando para obtener información sobre los 
parámetros necesarios. 

Nota: No existe un estándar umversalmente aceptado para Identificar los archivos de datos 
de los controles ActiveX. Consulte la documentación del control ActiveX que esté usando 
para saber el parámetro que debe emplear. 
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Para abrir el cuadro de diálogo Parámetros: 

1 Seleccione un objeto que acepte parámetros (como una película Shockwave, un 
control ActiveX, un plug-in de Navigator o un applet de Java) en la ventana de 
documento. 

2 Abra el cuadro de diálogo mediante uno de estos métodos: 

• Haga clic con el botón derecho del ratón (Windows) o haga clic manteniendo 
pulsada la tecla Control (Macintosh) en el objeto y elija Parámetros del menú 
contextual. 

• Abra el inspector de propiedades si es que no está abierto aún, amplíelo 
haciendo clic en la flecha de ampliación situada en la esquina inferior derecha y 
haga clic en el botón Parámetros. 

Para Introducir un valor para un parámetro en el cuadro de diálogo Parámetros: 

1 Haga clic en el botón más (+). 

2 Introduzca el nombre del parámetro en la columna Parámetro. 

3 Introduzca el valor del parámetro en la columna Valor. 

Para borrar parámetros: 

Seleccione un parámetro y pulse Suprimir. 

Para reordenar parámetros: 

Use los botones de flecha arriba y abajo. 


Usar comportamientos para controlar medios 

Puede agregar comportamientos a su página para que inicien y detengan diversos 
objetos de medios. 

Controlar Shockwave o Flash Permite reproducir, detener, rebobinar o ir a un 
marco de una película Shockwave o Flash. Consulte “Controlar Shockwave o 
Flash”, en la página 312. 

Reproducir sonido Permite reproducir un sonido. Por ejemplo, puede reproducir 
un efecto sonoro cuando el usuario mueva el cursor del ratón sobre un vínculo. 
Consulte “Reproducir sonido”, en la página 320. 
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CAPÍTULO 12 

Usar comportamientos 


Los comportamientos permiten la interacción del usuario con la página para 
cambiarla o provocar la realización de determinadas tareas. Un comportamiento es 
una combinación de un evento y una acción. Por ejemplo, cuando el usuario 
mueve el ratón sobre una imagen (un evento), la imagen podría resaltarse (una 
acción). Las acciones constan de código JavaScript ya definido que realiza tareas 
específicas, como abrir la ventana de un explorador, reproducir un sonido o 
detener una película Shockwave. Los eventos son definidos por los exploradores 
para cada elemento de página; por ejemplo, onMouseOver, onMouseOuty onClick son 
eventos asociados con vínculos en la mayoría de los exploradores, mientras que 
onLoad es un evento asociado con imágenes y el cuerpo del documento. Los 
eventos son generados por los exploradores en respuesta a las acciones del usuario; 
por ejemplo, cuando un visitante de la página desplaza el cursor sobre un vínculo, 
el explorador genera un evento onMouseOver y llama a la función JavaScript (caso 
de existir) que usted haya asociado a dicho evento. Los eventos que puede utilizar 
para desencadenar una acción determinada varían en función del explorador de 
que se trate. 

Al adjuntar un comportamiento a un elemento de una página, debe especificar 
tanto la acción como el evento que la activa. Varias acciones pueden ser activadas 
por un mismo evento; además, puede especificar el orden en que desea que tengan 
lugar esas acciones. 

Dreamweaver incluye varias acciones de comportamiento; pueden encontrarse 
otras acciones en el sitio Web de Dreamweaver, así como en los sitios Web de otros 
fabricantes. (Consulte “Descargar e instalar comportamientos de terceros”, en la 
página 305.) Si dispone de los conocimientos necesarios sobre JavaScript, también 
puede escribir sus propias acciones de comportamiento. Para obtener más 
información sobre cómo escribir acciones de comportamiento, consulte 
Ampliación de Dreamweaver. 



Usar el inspector de comportamientos 

Use el inspector de comportamientos para adjuntar comportamientos a objetos y 
modificar los parámetros de otros comportamientos previamente adjuntados. Los 
comportamientos se muestran en una lista ordenada alfabéticamente por eventos. 
Si hay varias acciones para un mismo evento, las acciones aparecen en el orden en 
que se ejecutarán. 

La etiqueta seleccionada aparece en la parte superior del inspector. 

Para abrir el inspector de comportamientos, elija Ventana > Comportamientos o 
haga clic en el botón Comportamientos del lanzador. 

Acciones (+) Muestra una lista de las acciones que pueden ejecutarse. Cuando se 
elige una acción, aparece un cuadro de diálogo con sus parámetros. 

Eliminar (-) Elimina la acción elegida y su evento asociado de la lista del inspector 
de comportamientos. 

Eventos para Especifica los exploradores en los que deberá funcionar el 
comportamiento actual. La selección que se realiza en este menú determina los 
eventos que aparecerán en el menú emergente Eventos. 

Botones de flechas arriba y abajo Desplazan la acción seleccionada hacia arriba o 
hacia abajo en la lista de comportamientos. Las acciones se ejecutan en el orden 
especificado. 

Eventos Muestra todos los eventos que pueden desencadenar la acción. Aparecerán 
distintos eventos dependiendo del objeto seleccionado. Si no aparecen los eventos 
esperados, asegúrese de que esté seleccionado el objeto correcto. Use el selector de 
etiquetas, situado en la parte inferior izquierda de la ventana de documento, para 
seleccionar una etiqueta. 

Nota: El menú emergente Eventos solamente aparecerá después de haber seleccionado una 
acción. 

Los distintos exploradores reconocen eventos diferentes para los diversos objetos. 
Elija los exploradores en los que desea que el comportamiento funcione en el 
menú emergente Eventos para. En el menú emergente Eventos aparecerán 
solamente aquellos eventos reconocidos por los exploradores que se hayan 
seleccionado. 
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Eventos 


En la siguiente lista se describen los eventos que pueden vincularse a las acciones 
enumeradas en el menú emergente Acciones (+) del inspector de 
comportamientos. Cuando un visitante de la página Web interactúa con la página 
(por ejemplo, haciendo clic en una imagen) el explorador genera sucesos que 
pueden utilizarse para llamar a funciones JavaScript que, a su vez, provocan la 
ejecución de una acción. (Los eventos también pueden generarse sin interacción 
del usuario, por ejemplo, cuando se configura una página para que vuelva a 
cargarse cada 10 segundos.) Dreamweaver proporciona numerosas acciones 
comunes que pueden desencadenarse utilizando estos eventos. 

La lista también especifica qué exploradores permiten generar cada evento. NS3 
significa Netscape Navigator 3.0; NS4 significa Netscape Navigator 4.0; IE3 
significa Internet Explorer 3.0; IE4 significa Internet Explorer 4.0. Para obtener 
información sobre exploradores 5.0, consulte el Centro de servicio técnico de 
Dreamweaver en la dirección http://www.macromedia.com/support/ 
dreamweaver/. Para obtener más cursors a información adicional sobre eventos 
relacionados con la vinculación de datos y marquesinas en Internet Explorer, 
consulte Dynamic HTML reference page (página de consulta de HTML 
dinámico) de Microsoft (incluida en “Recursos técnicos HTML y Web”, en la 
página 19). 

Tenga en cuenta que la mayoría de los eventos no son aplicables a todos los 
objetos. Para obtener más información sobre qué eventos son aplicables a cada 
etiqueta de los distintos exploradores, consulte los archivos de la carpeta 
Dreamweaver/Configuration/Behaviors/Events. 

onAbort (NS3, NS4, IE4) se genera cuando el usuario detiene el explorador antes 
de que se cargue completamente una imagen (por ejemplo, cuando el usuario hace 
clic en el botón Detener del explorador mientras se está cargando una imagen). 

onAfterUpdate (IE4) se genera cuando un elemento de datos vinculados de la 
página termina de actualizar el origen de los datos. 

onBeforellpdate (IE4) se genera cuando un elemento de datos vinculados de la 
página ha cambiado y va a perder foco (y, por consiguiente, va a actualizar el 
origen de los datos). 

onBlur (NS3, NS4, IE3, IE4) es lo contrario a onFocus. El evento onBlur se genera 
cuando el elemento especificado deja de ser el foco de interacción del usuario. Por 
ejemplo, cuando un usuario hace clic fuera de un campo de texto después de haber 
hecho clic en él, el explorador genera un evento onBlur para el campo de texto. 

onBounce (IE4) se genera cuando el contenido de un elemento de marquesina ha 
alcanzado el límite de la marquesina. 

onChange (NS3, NS4, IE3, IE4) se genera cuando el usuario cambia un valor de 
la página, como, por ejemplo, cuando el usuario elige un elemento de un menú o 
cambia el valor de un campo de texto y, seguidamente, hace clic en algún otro 
lugar de la página. 
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onClick (NS3, NS4, IE3, IE4) se genera cuando el usuario hace clic en el elemento 
especificado, como, por ejemplo, un vínculo, un botón o un mapa de imagen. 
[Hacer clic consiste en pulsar y, seguidamente, soltar el botón del ratón mientras se 
señala al elemento.) 

onDbIClick (NS4, IE4) se genera cuando el usuario hace doble clic en el elemento 
especificado. (Hacer doble clic consiste en pulsar y soltar rápidamente el botón del 
ratón mientras se señala al elemento.) 

onError (NS3, NS4, IE4) se genera cuando se produce un error en el explorador al 
cargar una página o una imagen. 

onFinish (IE4) se genera cuando el contenido de un elemento de marquesina 
completa un bucle. 

onFocus (NS3, NS4, IE3, IE4) se genera cuando el elemento especificado se 
convierte en el foco de interacción del usuario. Por ejemplo, al hacer clic en un 
campo de texto de un formulario, se genera un evento onFocus. 

onFlelp (IE4) se genera cuando el usuario hace clic en el botón de Ayuda o elige 
Ayuda del menú de un explorador. 

onKeyDown (NS4, IE4) se genera en el momento en que el usuario pulsa 
cualquier tecla. (No es preciso que el usuario suelte la tecla para que se genere este 
evento.) 

onKeyPress (NS4, 1E4) se genera cuando el usuario pulsa y suelta cualquier tecla; 
este evento es una combinación de los eventos onKeyDown y onKeyUp. 

onKeyUp (NS4, IE4) se genera cuando el usuario suelta una tecla después de 
pulsarla. 

onLoad (NS3, NS4, IE3, IE4) se genera cuando termina de cargarse una imagen o 
una página. 

onMouseDown (NS4, IE4) se genera cuando el usuario pulsa el botón del ratón. 
(No es necesario que el usuario suelte el botón del ratón para que se genere este 
evento.) 

onMouseMove (IE3, IE4) se genera cuando el usuario mueve el ratón mientras 
señala al elemento especificado. (Es decir, el cursor permanece dentro de los 
límites del elemento.) 

onMouseOut (NS3, NS4, IE4) se genera cuando el cursor abandona el elemento 
especificado. (El elemento especificado es generalmente un vínculo.) 
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onMouseOver (NS3, NS4, IE3, IE4) se genera cuando el ratón comienza a 
moverse para señalar al elemento especificado. (Es decir, cuando el cursor se 
desplaza desde una posición en la que no señala al elemento hasta una posición en 
la que sí lo señala.) El elemento especificado para este evento es generalmente un 
vínculo. 

onMouseUp (NS4, IE4) se genera cuando se suelta un botón del ratón que se 
encuentra pulsado. 

onMove (NS4) se genera cuando se mueve una ventana o un marco. 

onReadyStateChange (IE4) se genera cuando cambia el estado del elemento 
especificado. Entre los estados posibles del elemento figuran uninitiallzed (sin 
inicializar), loading (cargando) y complete (terminado). 

onReset (NS3, NS4, IE3, IE4) se genera cuando se restauran los valores 
predeterminados de un formulario. 

onResize (NS4, IE4) se genera cuando el usuario cambia el tamaño de la ventana 
del explorador o de un marco. 

onRowEnter (IE4) se genera cuando ha cambiado el cursor de registro actual del 
origen de datos vinculados. 

onRowExit (IE4) se genera cuando va a cambiar el cursor de registro actual del 
origen de datos vinculados. 

onScroll (IE4) se genera cuando el usuario desplaza la página hacia arriba o hacia 
abajo. 

onSelect (NS3, NS4, IE3, IE4) se genera cuando el usuario selecciona texto en un 
campo de texto. 

onStart (IE4) se genera cuando el contenido de un elemento de marquesina inicia 
un bucle. 

onSubmit (NS3, NS4, IE3, IE4) se genera cuando el usuario envía un formulario, 
onllnload (NS3, NS4, IE3, IE4) se genera cuando el usuario abandona la página. 
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Adjuntar un comportamiento 

Se pueden adjuntar comportamientos al documento completo (es decir, a la 
etiqueta BODY) o a vínculos, imágenes, elementos de formulario o a cualquier otro 
elemento HTML. El explorador determina los elementos que pueden aceptar 
comportamientos. Internet Explorer 4.0, por ejemplo, tiene una gama de eventos 
para cada elemento mucho más amplia que Netscape Navigator 4.0, o que la 
versión 3.0 de cualquier otro explorador. 

Se puede especificar más de una acción para cada evento. Las acciones tienen lugar 
en el orden en el que se enumeran en la columna Acciones del inspector de 
comportamientos. Si desea información sobre la manera de cambiar el orden de 
las acciones, consulte “Cambiar un comportamiento”, en la página 304. 


Para adjuntar un comportamiento: 

1 Seleccione un objeto. 

Para adjuntar un comportamiento a la página completa, haga clic en la etiqueta 
<body> en el selector de etiquetas, situado en la parte inferior izquierda de la 
ventana de documento. 

2 Elija Ventana > Comportamientos para abrir el inspector de comportamientos 
o haga clic en el botón Comportamientos del lanzador. 

La etiqueta HTML del objeto seleccionado aparece en la barra de título del 
inspector de comportamientos. 

3 Haga clic en el botón de signo más (+) y elija una acción del menú emergente 
Acciones. 

Las acciones que se muestran atenuadas en el menú no pueden seleccionarse 
debido a que no funcionan con el documento actual. Por ejemplo, la acción 
Reproducir línea de tiempo estará atenuada si el documento carece de líneas de 
tiempo. Si no hay eventos para el objeto seleccionado, todas las acciones 
aparecerán atenuadas. 

Aparecerá un cuadro de diálogo en el que se muestran los parámetros y las 
instrucciones para la acción en cuestión. 

4 Introduzca los parámetros de la acción y haga clic en Aceptar. 

Todas las acciones proporcionadas con Dreamweaver funcionan con los 
exploradores de la versión 4.0 y posteriores. Algunas acciones no funcionan en 
los exploradores antiguos. Consulte “Usar las acciones de comportamiento 
incluidas con Dreamweaver”, en la página 306. 
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5 El evento predeterminado que desencadena la acción aparece en la columna 
Eventos. Si este no es el evento que desea para el desencadenamiento de la 
acción, seleccione otro en el menú emergente Eventos. 

En el menú emergente Eventos aparecen diferentes eventos en función del 
objeto seleccionado y de los exploradores especificados en el menú emergente 
Eventos para. Los eventos pueden aparecer atenuados si los objetos pertinentes 
aún no existen en la página o si el objeto seleccionado no puede recibir eventos. 
Si no aparecen los eventos esperados, asegúrese de que está seleccionado el 
objeto correcto o cambie los exploradores de destino en el menú emergente 
Eventos para. 

Al adjuntar un comportamiento a una imagen, algunos eventos (como 
onMouseOver) aparecen entre paréntesis. Estos eventos solamente están 
disponibles para vínculos. Cuando se elige uno de ellos, Dreamweaver ajusta 
una etiqueta A alrededor de la imagen para definir un vínculo ficticio. El 
vínculo ficticio se representa mediante un signo de almohadilla (#) en el cuadro 
Vínculo del inspector de propiedades. Puede cambiar el valor del vínculo si 
desea convertirlo en un vínculo real con otra página, pero si borra el signo de 
almohadilla sin sustituirlo por otro vínculo, borrará el comportamiento. 


Adjuntar un comportamiento a una línea de 
tiempo 

Coloque comportamientos en líneas de tiempo para desencadenarlos en un marco 
determinado de la línea de tiempo. (Para obtener información sobre la creación de 
una línea de tiempo, consulte “Líneas de tiempo”, en la página 253.) 

Para colocar un comportamiento en una línea de tiempo: 

1 Haga doble clic en un marco en el canal Behaviors del inspector de líneas de 
tiempo. 

2 Use el inspector de comportamientos para definir el comportamiento. 

Sólo un tipo de evento puede desencadenar una acción en una línea de tiempo: la 
animación llega a un número de marco determinado (un evento onFrame7, por 
ejemplo). 

El comportamiento puede afectar a cualquier objeto de la página y no sólo a los 
objetos de la línea de tiempo. Reproduzca la línea de tiempo en un explorador 
para ver cómo funciona el comportamiento. En Dreamweaver no se puede 
obtener la vista previa de un comportamiento. 
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Cambiar un comportamiento 

Después de adjuntar un comportamiento, se puede cambiar el evento que 

desencadena la acción, agregar o eliminar acciones y cambiar los parámetros de las 

acciones. 

Para cambiar un comportamiento: 

1 Seleccione un objeto con un comportamiento adjuntado. 

2 Elija Ventana > Comportamientos para abrir el inspector de comportamientos. 

Los comportamientos aparecerán en el inspector ordenados alfabéticamente 
por eventos. Si hay varias acciones para un mismo evento, las acciones aparecen 
en el orden en que se ejecutarán. 

3 Dispone de las opciones siguientes: 

• Para editar una acción, haga doble clic en el nombre del comportamiento o 
selecciónelo y pulse la tecla Entrar (Windows) o Retorno (Macintosh); 
seguidamente, cambie los parámetros en el cuadro de diálogo y haga clic en 
Aceptar. 

• Para cambiar el orden de las acciones de un evento dado, seleccione el 
comportamiento y haga clic en los botones de flecha arriba o abajo. 

• Para eliminar un comportamiento, selecciónelo y haga clic en el botón de signo 
menos (-) o pulse Suprimir. 


304 Capítulo 12 



Crear nuevas acciones 


Las acciones son elementos de JavaScript. Si posee los conocimientos necesarios 
sobre JavaScript, puede escribir nuevas acciones y hacer que aparezcan en el menú 
emergente Acciones del inspector de comportamientos. Para obtener más 
información, consulte Ampliación de Dreamiveaver. 


Descargar e instalar comportamientos de 
terceros 

Una de las características más interesantes de Dreamweaver es su capacidad de 
ampliación, esto es, que ofrece a aquellos usuarios que disponen de suficientes 
conocimientos de JavaScript la oportunidad de crear sus propios objetos, 
comportamientos, comandos e inspectores de propiedades. Muchos de estos 
usuarios han decidido compartir sus diseños con otros usuarios mediante el envío 
de archivos al sitio Web de Dreamweaver. Para descargar estos archivos de 
ampliación, abra el inspector de comportamientos y elija Obtener más 
comportamientos del menú emergente Acciones (+). 


Para instalar un comportamiento descargado de otro proveedor en su copia de 
Dreamweaver: 

1 Extraiga los archivos de comportamiento del archivo descargado con una 
herramienta de descompresión de archivos. 

Por ejemplo, WinZip (Windows) o Ziplt (Macintosh) pueden abrir los 
archivos zip que están disponibles en el Centro de recursos en línea. 

2 Arrastre los archivos extraídos a la carpeta Configuration/Behaviors/Actions de 
la carpeta de la aplicación Dreamweaver. 

3 Vuelva a iniciar Dreamweaver. 
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Usar las acciones de comportamiento incluidas 
con Dreamweaver 

Las acciones de comportamiento incluidas con Dreamweaver han sido creadas 
para funcionar con la versión 4.0 de todos los exploradores y con Internet 
Explorer 5. (Netscape Navigator 5 no ha aparecido aún en el momento de 
redacción de este texto.) No obstante, algunas acciones no funcionan en los 
exploradores antiguos. En la siguiente tabla encontrará información sobre el 
funcionamiento de las acciones en los distintos exploradores de versiones 
anteriores a la 4.0. Para obtener una explicación de lo que hace cada acción y de la 
manera de elegir sus posibles opciones, consulte los temas incluidos después de la 
tabla. 



Macintosh 


Windows 


Acción 

Netscape 
Navigator 3.0 

Internet 
Explorer 3.0x 

Netscape 
Navigator 3.0 

Internet 

Explorer 3,01 

Llamar JavaScript 

OK 

Falla sin error 

OK 

OK 

Cambiar propiedad 

OK 

Falla sin error 

OK 

OK 

Comprobar 

explorador 

OK 

Falla sin error 

OK 

OK 

Comprobar plug-in 

OK 

Falla sin error 

OK 

OK 

Controlar 
Shockwave o Flash 

OK 

Falla sin error 

OK 

Falla sin error 

Arrastrar capa 

Falla sin error 

Falla sin error 

Falla sin error 

Falla sin error 

Ira URL 

OK 

Falla sin error 

OK 

OK 

Menú de salto 

OK 

Falla sin error 

OK 

Falla sin error 

Menú de salto Ir 

OK 

Falla sin error 

OK 

Falla sin error 

Abrir ventana del 
explorador 

OK 

Falla sin error 

OK 

OK 

Reproducir sonido 

OK 

Falla sin error 

OK 

Falla sin error 

Mensaje emergente 

OK 

Falla sin error 

OK 

OK 

Carga previa de 
imágenes 

OK 

Falla sin error 

OK 

Falla sin error 

Definir Imagen de 
barra de 
exploración 

OK 

Falla sin error 

OK 

Falla sin error 

Definir texto de 
marco 

OK 

Falla sin error 

OK 

OK 

Definir texto de 
capa 

Falla sin error 

Falla sin error 

Falla sin error 

Falla sin error 
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Macintosh 


Windows 


Acción 

Netscape 
Navigator 3.0 

Internet 
Explorer 3.0x 

Netscape 
Navigator 3.0 

Internet 

Explorer 3,01 

Definir texto de 
barra de estado 

OK 

Falla sin error 

OK 

OK 

Definir texto de 
campo de texto 

OK 

Falla sin error 

OK 

OK 

Mostrar-Ocultar 

capas 

Falla sin error 

Falla sin error 

Falla sin error 

Falla sin error 

Intercambiar 

imagen 

OK 

Falla sin error 

OK 

Falla sin error 

Restaurar imagen 
intercambiada 

OK 

Falla sin error 

OK 

Falla sin error 

Ir a marco de línea 
de tiempo 

Reproducir línea de 
tiempo y Detener 
línea de tiempo 

La animación de 
las imágenes de 
origen y la 
llamada a los 
comportamientos 
funcionan, pero la 
animación de 
capas falla sin 
error. 

Falla sin error 

La animación de 
las imágenes de 
origen y la 
llamada a los 
comportamientos 
funcionan, pero la 
animación de 
capas falla sin 
error. 

Falla sin error 

Validar formulario 

OK 

Falla sin error 

OK 

OK 


Llamar JavaScript 

La acción Llamar JavaScript permite usar el inspector de comportamientos para 
especificar que debe ejecutarse una función personalizada o línea de código 
JavaScript cuando se produzca un evento determinado. 


Para usar la acción Llamar JavaScript: 

1 Seleccione un objeto y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Llamar JavaScript del menú 
emergente Acciones. 

3 Escriba el código JavaScript exacto que se ejecutará o el nombre de una 
función. 

Por ejemplo, para crear un botón Atrás, podría escribir 

¡f (history.length > 0){history.back()}. Si ha encapsulado el código en una función, 
escriba solamente el nombre de la función (por ejemplo, goBackO). 

4 Haga clic en Aceptar. 
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5 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. 

Cambiar propiedad 

Use la acción Cambiar propiedad para cambiar el valor de una de las propiedades 
de un objeto (por ejemplo, el color de fondo de una capa o la acción de un 
formulario). Las propiedades que puede cambiar están determinadas por el 
explorador. Son muchas más las propiedades que este comportamiento puede 
cambiar en Microsoft Internet Explorer (IE) 4.0 que en IE 3.0 o Netscape 
Navigator 3.0 o 4.0. Por ejemplo, puede configurar el color de fondo de una capa 
de forma dinámica. 

Nota: Utilice esta acción sólo si posee buenos conocimientos de HTML y JavaScript. 


Para usar la acción Cambiar propiedad: 

1 Seleccione un objeto y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Cambiar propiedad del 
menú emergente Acciones. 

3 Del menú emergente Tipo de objeto, elija el tipo de objeto cuyas propiedades 
desea cambiar. 

En el menú emergente Objeto con nombre se enumeran ahora todos los 
objetos con nombre del tipo elegido. 

4 Seleccione un objeto del menú emergente Objeto con nombre. 

5 Seleccione una propiedad en el menú emergente Propiedad o introduzca el 
nombre de la propiedad en el campo de texto. 

Para ver las propiedades que se pueden cambiar en cada explorador, elija 
diferentes exploradores en el menú emergente Explorador. Si introduce un 
nombre de propiedad manualmente, asegúrese de usar el nombre exacto 
JavaScript de la propiedad (y recuerde que las propiedades de JavaScript 
distinguen mayúsculas de minúsculas). 

6 Introduzca el nuevo valor de la propiedad en el campo Nuevo valor y haga clic 
en Aceptar. 

7 Compruebe que el evento predeterminado es el que usted desea. (Cuando tiene 
lugar el evento, la acción se ejecuta y cambia la propiedad.) 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. 


308 Capítulo 12 



Comprobar explorador 

Use la acción Comprobar explorador para enviar a los visitantes a distintas 
páginas, dependiendo de las marcas y versiones de sus exploradores. Por ejemplo, 
podría desear que los usuarios fueran a una página si su explorador fuera Netscape 
Navigator 4.0 o una versión posterior; que fueran a otra página si tuvieran 
Microsoft Internet Explorer 4.0 o una versión posterior; y que permanecieran en 
la página actual si tuvieran un explorador de algún otro tipo. 

Resulta útil adjuntar este comportamiento a la etiqueta BODY de una página que 
sea compatible prácticamente con cualquier explorador (y que no use ninguna 
otra secuencia JavaScript); de esta manera, los visitantes que visiten la página con 
JavaScript desactivado podrán, aun así, ver algo de contenido. 

Otra posibilidad consiste en adjuntar este comportamiento a un vínculo nulo 
(etiqueta A) y que la acción determine el destino del vínculo en función de la 
marca y la versión del explorador del visitante. 

Para usar la acción Comprobar explorador: 

1 Seleccione un objeto y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Comprobar explorador del 
menú emergente Acciones. 

3 Determine el criterio de separación que desea aplicar a los visitantes: por marca 
de explorador, por versión de explorador o por ambas. 

Por ejemplo, ¿desea que todos los usuarios que tengan un explorador de la 
versión 4.0 vean una página y que los demás vean otra página distinta? ¿O 
prefiere quizá que los usuarios de Netscape Navigator vean una página y que los 
usuarios de Microsoft Internet Explorer (IE) vean otra distinta? 

4 Especifique una versión de Netscape Navigator. 

5 En los menús emergentes contiguos, elija las opciones sobre lo que debe ocurrir 
si el explorador es de la versión especificada o posterior y lo que debe ocurrir en 
caso contrario. 

Las opciones son Ir a URL, Ir a Alt URL y Permanecer en esta página. 

6 Especifique una versión de Microsoft Internet Explorer. 

7 En los menús emergentes contiguos, elija las opciones sobre lo que debe ocurrir 
si el explorador es de la versión especificada o posterior y lo que debe ocurrir en 
caso contrario. 

Las opciones son Ir a URL, Ir a Alt URL y Permanecer en esta página. 
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8 Elija una opción en el menú emergente Otros exploradores para especificar lo 
que debe ocurrir si el explorador no es Netscape Navigator ni Microsoft 
Internet Explorer. 

Permanecer en esta página es la mejor opción para los exploradores distintos de 
Navigator e IE porque la mayoría de ellos no son compatibles con JavaScript y, 
si no pueden leer este comportamiento, permanecerán en la misma página en 
cualquier caso. 

9 Introduzca las rutas y los nombres de archivo del URL y del URL alternativo en 
los campos de texto situados en la parte inferior del cuadro de diálogo. Si 
introduce un URL remoto, deberá introducir el prefijo http:// además de la 
dirección www. 

10 Haga clic en Aceptar. 

11 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. Recuerde que el objetivo de este comportamiento es 
comprobar las distintas versiones de los exploradores, por lo que lo más 
recomendable es elegir un evento que funcione tanto en la versión 3.0 como en 
otras posteriores de los exploradores. 

Comprobar plug-in 

Use la acción Comprobar plug-in para remitir a los visitantes a distintas páginas 
dependiendo de si tienen instalado el plug-in en cuestión. Por ejemplo, puede 
hacer que los usuarios vayan a una página si tienen Shockwave y a otra distinta si 
no lo tienen. 

Nota: No es posible detectar plug-ins específicos en Microsoft Internet Explorer (IE) con 
JavaScript. No obstante, la selección de Flash o Director hará que se agregue el código 
VBScript adecuado a la página para detectar los plug-ins en IE en Windows. 

Para usar la acción Comprobar plug-in: 

1 Seleccione un objeto y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Comprobar plug-in del 
menú emergente Acciones. 

3 Seleccione un plug-in en el menú emergente Plug-in, o haga clic en Entrar e 
introduzca el nombre exacto del plug-in en el campo contiguo. 

Deberá utilizar el nombre exacto del plug-in tal y como se especifica en la 
página Acerca de los Plug-ins en Netscape Navigator. (En Windows, elija el 
comando Ayuda > Acerca de Plug-ins de Navigator; en Macintosh, elija Acerca 
de Plug-ins del menú Apple.) 
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4 En el campo Si se encuentra, Ir a URL, especifique un URL para los usuarios 
que dispongan del plug-in. 

Si especifica un URL remoto, deberá incluir el prefijo http:// en la dirección. 

Para hacer que los usuarios que disponen del plug-in permanezcan en la misma 
página, deje vacío este campo. 

5 En el campo De lo contrario, Ir a URL, especifique un URL alternativo para los 
usuarios que no dispongan del plug-in. 

Para hacer que los usuarios que no disponen del plug-in permanezcan en la 
misma página, deje vacío este campo. 

6 La detección de plug-ins no es posible en Internet Explorer para Macintosh; 
además, Internet Explorer para Windows no permite detectar la mayoría de los 
plug-ins. De forma predeterminada, cuando la detección resulta imposible, se 
envía al usuario al URL indicado en el campo De lo contrario. Para enviar al 
usuario al primer URL (Si se encuentra), seleccione la opción Ir siempre al 
primer URL si no es posible detectar. Cuando está seleccionada, esta opción 
hace que se dé por hecho que el usuario dispone del plug-in, a no ser que el 
explorador indique explícitamente que el plug-in no está presente. 

Por lo general, si el contenido del plug-in es parte integrante de la página, 
seleccione la opción Ir siempre al primer URL si no es posible detectar; los 
usuarios que no dispongan del plug-in normalmente recibirán un mensaje del 
explorador para indicarles que deben descargar el plug-in. Si el contenido del 
plug-in no es una parte esencial de la página, deje esta opción sin seleccionar. 

Esta opción afecta sólo a Internet Explorer; Netscape Navigator siempre detecta 
los plug-ins. 

7 Haga clic en Aceptar. 

8 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. 
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Controlar Shockwave o Flash 


Use la acción Controlar Shockwave o Flash para reproducir, detener, rebobinar o 
ir a un marco de una película Shockwave o Flash. 

Para usar la acción Controlar Shockwave o Flash: 

1 Elija Insertar > Medio > Shockwave o Insertar > Medio > Flash para insertar 
una película Shockwave o Flash, respectivamente. 

2 Elija Ventana > Propiedades e introduzca un nombre para la película en el 
campo de texto situado más a la izquierda. Debe asignar un nombre a la 
película para poder adjuntar la acción Controlar Shockwave o Flash. 

3 Con la película aún seleccionada en la ventana de documento, abra el inspector 
de comportamientos. 

4 Haga clic en el botón de signo más (+) y elija Controlar Shockwave o Flash del 
menú emergente Acciones. 

5 Seleccione una película en el menú emergente Objeto Shockwave. 

Automáticamente, Dreamweaver presenta una lista con todos los archivos que 
terminan en .dcr, .dir, .swf, o .spl que están en las etiquetas OBJECT o EMBED en 
el documento actual. 

6 Elija reproducir, detener, rebobinar o ir a una secuencia de la película. La 
opción Reproducir reproduce la película desde el marco actual. 

7 Haga clic en Aceptar. 

8 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. 

Arrastrar capa 

La acción Arrastrar capa permite al usuario arrastrar una capa. Use esta acción para 
crear puzzles, controles deslizantes y otros elementos móviles de interfaz. 

Se puede especiñcar la dirección en la que el usuario puede arrastrar la capa 
(horizontalmente, verticalmente o en cualquier dirección), un destino hasta el que 
el usuario debe arrastrar la capa, si la capa debe ajustarse al destino cuando aquélla 
se encuentra a un cierto número de píxeles del destino y qué sucederá cuando la 
capa llegue al destino, entre otras opciones. 
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Dado que la llamada a la acción Arrastrar capa debe producirse antes de que el 
usuario pueda arrastrar la capa, asegúrese de que el evento que desencadena la 
acción se produzca antes de que el usuario intente arrastrar la capa. Es 
recomendable adjuntar la acción Arrastrar capa al objeto BODY (con el evento 
onLoad), aunque también puede adjuntarla a un vínculo que llene toda la capa 
(como, por ejemplo, un vínculo alrededor de una imagen) usando el evento 
onMouseOver. 


Para usar la acción Arrastrar capa: 

1 Elija Insertar > Capa o haga clic en el botón Capa en la paleta de objetos y 
arrastre una capa a la ventana de documento. 

2 Anule la selección de la capa haciendo clic en cualquier otro lugar de la ventana 
de documento. 

3 Abra el inspector de comportamientos. 

4 Haga clic en el botón de signo más (+) y elija Arrastrar capa del 
menú emergente Acciones. 

Si la acción Arrastrar capa no está disponible, es muy probable que haya una 
capa seleccionada. Dado que las capas no aceptan eventos en la versión 4.0 de 
ninguno de los dos exploradores, deberá seleccionar un objeto diferente, como 
la etiqueta BODY, o un vínculo (etiqueta A), o bien cambiar el explorador de 
destino a IE 4.0 en el menú emergente Eventos para. 

5 Seleccione la capa que desea hacer desplazable del menú-emergente-Capa. 

6 Seleccione Restringido o No restringido en el menú emergente-Movimiento. 

El movimiento no restringido es adecuado para puzzles y otros juegos de 
arrastrar y soltar. Para los controles deslizantes y los escenarios móviles, como 
cajones de archivos, cortinas y minipersianas, elija movimiento restringido. 

7 Para movimiento restringido, introduzca valores (en píxeles) en los campos 
Arriba, Abajo, Derecha e Izquierda. 

Los valores son relativos a la posición inicial de la capa. Para restringir el 
movimiento a una región rectangular, introduzca valores positivos en los cuatro 
campos. Para permitir solamente el movimiento vertical, introduzca valores 
positivos para Arriba y Abajo, y 0 para Izquierda y Derecha. Para permitir 
solamente el movimiento horizontal, introduzca valores positivos para 
Izquierda y Derecha, y 0 para Arriba y Abajo. 
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8 Introduzca valores (en píxeles) en los campos Izquierdo y Superior para definir 
el destino de la capa. 

El destino de la capa es la zona hasta la que usted desea que el usuario arrastre la 
capa. Se considera que una capa ha alcanzado el destino cuando sus 
coordenadas izquierda y superior coinciden con los valores introducidos en los 
campos Izquierdo y Superior. Los valores son relativos al ángulo superior 
izquierdo de la ventana del explorador. Haga clic en la opción Obtener posición 
actual para rellenar automáticamente los campos con la posición actual de 
la capa. 

9 Introduzca un valor (en píxeles) en el campo Ajustar si a menos de, para 
determinar lo cerca del destino que el usuario tiene que soltar la capa para que 
esta se ajuste al destino. 

Los valores grandes facilitan al usuario la localización el destino para soltar la 
capa. 

10 Para puzzles simples y manipulación de escenarios, puede detenerse aquí. Para 
definir el manejador de arrastre de una capa, controlar el movimiento de una 
capa mientras está siendo arrastrada y desencadenar una acción al soltar la capa, 
haga clic en la ficha Avanzado. 

11 Para definir una zona determinada de la capa en la que el usuario debe hacer 
clic para arrastrarla, elija Interior de capa en el menú emergente Arrastrar 
selector; luego introduzca las coordenadas izquierda y superior, así como los 
valores de ancho y alto del manejador de arrastre. 

Esta opción resulta útil cuando la imagen contenida en la capa incluye un 
elemento que sugiere la posibilidad de arrastrarla, como una barra de título o 
un asa de cajón. No configure esta opción si desea que el usuario pueda hacer 
clic en algún lugar de la capa para arrastrarla. 

12 Elija las opciones Al arrastrar que desee utilizar: 

• Seleccione Traer la capa al frente si la capa debe desplazarse a la primera 
posición en el orden de apilamiento mientras se está arrastrando. Si selecciona 
esta opción, utilice el menú emergente para determinar si desea dejar la capa en 
la primera posición o devolverla a su posición original en el orden de 
apilamiento. 

• Introduzca código JavaScript o un nombre de función (por ejemplo, 
monitorLayerO) en el campo Llamar JavaScript para ejecutar repetidamente el 
código o función mientras se esté arrastrando la capa. Por ejemplo, podría 
escribir una función que controle las coordenadas de la capa y muestre mensajes 
y consejos como "ya está cerca" o "está lejísimos del destino donde soltar la 
capa" en el campo de texto. Consulte “Recopilar información sobre la capa 
desplazable”, en la página 315. 
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13 Introduzca código JavaScript o un nombre de función (por ejemplo, 
evaluateLayerPosO) en el segundo campo Llamar JavaScript para ejecutar el 
código o la función cuando se suelte la capa. Seleccione la opción Sólo si se 
ajusta cuando el código JavaScript deba ejecutarse solamente si la capa ha 
alcanzado a su destino. 

14 Haga clic en Aceptar. 

15 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. Recuerde que las capas no son compatibles con los 
exploradores de la versión 3.0. 

Nota: No se puede adjuntar la acción Arrastrar capa a un objeto con los eventos 

onMouseDown u onClick. 


Recopilar información sobre la capa desplazable 

Cuando se adjunta a un objeto la acción Arrastrar capa, Dreamweaver inserta la 
función MM_dragl_ayer() en la sección HEAD del documento. Además de registrar la 
capa como desplazable, esta función define tres propiedades para cada capa 
desplazable (MM LEFTRIGHT, MM_UPDOWN y MM_SNAPPED) que se usted puede usar 
en sus propias funciones de JavaScript para determinar la posición horizontal 
actual de la capa, la posición vertical actual de la capa y si la capa ha alcanzado el 
destino en el que debe soltarse. 

Por ejemplo, la siguiente función muestra el valor de la propiedad MM UPDOWN 
(la posición vertical actual de la capa) en un campo de formulario llamado 
curPosFleld. (Los campos de formulario son útiles para mostrar informaciones que 
se actualizan continuamente porque son dinámicos, es decir, que se puede cambiar 
su contenido una vez que la página ha terminado de cargarse, tanto en Netscape 
Navigator como en Microsoft Internet Explorer.) 

function getPos(layername){ 
var layerRef = MM_f¡ridObj(layername); 
var curVertPos = layerRef.MM_UPDOWN; 
document.tracking.curPosField.value = curVertPos; 

} 

En lugar de mostrar el valor de MM UPDOWN o MM LEFTRIGEIT en un campo de 
formulario, puede crear una función que presente un mensaje en el campo de 
formulario dependiendo de lo próximo que esté el valor de la zona donde debe 
soltarse la capa, o bien puede llamar otra función para que muestre u oculte una 
capa dependiendo del valor. El único límite a las posibilidades de reacción al valor 
de MM UPDOWN o MM LEFTRIGHT está en su imaginación y en sus conocimientos 
de JavaScript. 


Usar comportamientos 315 



Resulta especialmente útil leer la propiedad MM_SNAPPED cuando se tienen varias 
capas en la página y todas ellas deben alcanzar sus objetivos antes de que el usuario 
pueda pasar a la siguiente página o tarea. Por ejemplo, puede crear una función 
para determinar cuántas capas tienen un valor MM_SNAPPED igual a true 
(verdadero) y llamarlas cada vez que se suelte una capa. Cuando el recuento de 
capas ajustadas alcanza el número deseado, puede enviar al usuario a la página 
siguiente o presentarle un mensaje emergente de felicitación. 

Si ha utilizado el evento onMouseOver para adjuntar la acción Arrastrar capa a 
vínculos contenidos en distintas capas, deberá realizar un pequeño cambio en la 
función MM_dragLayer() para evitar que la propiedad MM_SNAPPED de una capa 
ajustada se restablezca con el valor false al pasar el cursor del ratón sobre la capa. 
(Esto puede ocurrir si ha utilizado Arrastar capa para crear un puzzle de imagen, 
ya que es probable que el usuario pase el cursor del ratón por encima de las piezas 
ajustadas al colocar otras piezas.) MM dragl_ayer() no impide este comportamiento, 
ya que éste resulta, a veces, deseable (por ejemplo, si desea establecer múltiples 
destinos para soltar una misma capa). 

Para evitar que se vuelvan a registrar las capas ajustadas: 

1 Elija Edición > Buscar. 

2 Seleccione Fuente HTML del menú emergente Buscar. 

3 Escriba (IcurDrag) en el campo de texto contiguo. 

4 Haga clic en Buscar siguiente. 

Si Dreamweaver le pregunta si desea continuar buscando desde el principio del 
documento, haga clic en Sí. Dreamweaver encontrará una instrucción con el 
siguiente contenido: 

if (IcurDrag) return false; 

5 Cierre el cuadro de diálogo Buscar y modifique la instrucción en el inspector de 
HTML para que quede de la siguiente forma: 

¡f (IcurDrag | | curDrag.MM SNAPPED != nuil) return false; 

Las dos barras paralelas verticales (| |) significan "o" y curDrag es una variable 
que representa la capa que se está registrando como desplazable. En inglés, la 
instrucción significa "Si curDrag no es un objeto, o si ya tiene un valor 
MMSNAPPED, no te molestes en ejecutar el resto de la función.” 


Ira URL 

La acción Ir a URL abre una nueva página en la ventana actual o en el marco 
especificado. Esta acción resulta especialmente útil para cambiar el contenido de 
dos o más marcos con un solo clic. También puede llamarse en una línea de 
tiempo para saltar a una nueva página después de un intervalo de tiempo 
especificado. 
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Para usar la acción Ir a URL: 

1 Seleccione un objeto y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Ir a URL del 
menú emergente Acciones. 

3 Elija un destino para el URL en la lista Abrir en. 

La lista Abrir en automáticamente muestra los nombres de todos los marcos del 
conjunto de marcos actual así como de la ventana principal. Si no hay marcos, 
la ventana principal es la única opción posible. 

Nota: Esta acción puede dar lugar a resultados inesperados si hay algún marco que se 
llame top, blank, self o parent. Los exploradores a veces confunden estos nombres con 
nombres de destino reservados. 

4 Haga clic en Examinar para seleccionar el documento que desea abrir o 
introduzca la ruta y el nombre de archivo del documento en el campo URL. 

5 Repita los pasos 3 y 4 para abrir más documentos en otros marcos. 

6 Haga clic en Aceptar. 

7 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que busca 
no aparecen en la lista, cambie el explorador de destino en el menú emergente 
Eventos para. 

Menú de salto 

Al crear un menú de salto mediante Insertar > Objeto de formulario > Menú de 
salto, Dreamweaver crea un objeto de menú y le adjunta el comportamiento 
adecuado. Normalmente no es preciso adjuntar manualmente la acción Menú de 
salto a un objeto. Por el contrario, haga doble clic en una acción Menú de salto 
existente en el inspector de comportamientos para editar un menú de salto, 
cambiar la ubicación en la que el archivo vinculado debe abrirse o agregar o 
cambiar un mensaje de selección de menú. Para obtener información acerca de la 
creación de un menú de salto, consulte “Insertar un menú de salto”, en la 
página 122. 

Para editar un menú de salto utilizando el Inspector de comportamientos: 

1 Cree un objeto de menú de salto si es que no hay todavía ninguno en el 
documento. 

2 Seleccione el objeto de menú de salto y abra el inspector de comportamientos. 

3 Haga doble clic en Menú de salto en la columna Acciones. 

4 En el cuadro de diálogo Menú de salto, edite los elementos de menú y, 
seguidamente, haga clic en Aceptar. 
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Menú de salto Ir 


La acción Menú de salto Ir permite asociar un botón Ir al menú de salto. (Para 
utilizar esta acción, debe existir ya un menú de salto en el documento.) Al hacer 
clic en el botón Ir, se abre el vínculo seleccionado en el menú de salto. Los menús 
de salto generalmente no necesitan un botón Ir; al elegir un elemento de un menú 
de salto, normalmente se carga un URL sin necesidad de que el usuario lleve a 
cabo ninguna otra operación. No obstante, si el usuario elige el mismo elemento 
que se encuentra ya seleccionado en el menú de salto, el salto no se producirá. El 
botón Ir resulta útil en aquellos casos en los que resulte evidente para los visitantes 
que, al elegir de nuevo la opción actualmente seleccionada en el menú de salto, no 
se produce el salto en cuestión. Es particularmente recomendable agregar un 
botón Ir a un menú de salto cuando éste aparezca en un marco y los elementos del 
menú de salto estén vinculados con páginas de otros marcos que proporcionen 
vínculos adicionales. 


Para utilizar la acción Menú de salto Ir: 

1 Seleccione un objeto para utilizarlo como botón Ir (generalmente una imagen 
de un botón) y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Menú de salto Ir del 
menú emergente Acciones. 

3 En el menú emergente Elegir menú de salto, elija un menú para que se active en 
él el botón Ir. 

4 Haga clic en Aceptar. 

Abrir ventana del explorador 

Use la acción Abrir ventana del explorador para abrir un URL en una nueva 
ventana. Se pueden especificar las propiedades de la nueva ventana, incluidos su 
tamaño, sus atributos (si se puede cambiar su tamaño, si tiene barra de menús, 
etc.) y su nombre. 

Si no se especifican los atributos de la ventana, se abrirá con el mismo tamaño y 
los mismos atributos de la ventana que la inició. Al especificar algunos atributos de 
la ventana, se desactivan automáticamente todos los demás atributos que no se 
activen explícitamente. Por ejemplo, si no se establecen los atributos de la ventana, 
puede abrirse con un tamaño de 640 x 480 píxeles y tener barra de exploración, 
barra de herramientas de ubicación, barra de estado y barra de menús. Si se 
establece explícitamente la anchura en 640 píxeles y la altura en 480 píxeles y no se 
establece ningún otro atributo, la ventana se abrirá con un tamaño de 640 x 480 
píxeles y carecerá de barra de exploración, de barra de herramientas de ubicación, 
de barra de estado, de barra de menús, de manejadores de cambio de tamaño y de 
barras de desplazamiento. 
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Para usar la acción Abrir ventana del explorador: 

1 Seleccione un objeto y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Abrir ventana del explorador del 
menú emergente Acciones. 

3 Haga clic en Examinar para seleccionar un archivo o introduzca el URL que 
desea ver. 

4 Configure las opciones que desee de las siguientes: 

Ancho de la ventana Especifica la anchura de la ventana en píxeles. 

Alto de la ventana Especifica la altura de la ventana en píxeles. 

Barra de herramientas de exploración Es la fila de botones del explorador que 
incluye Atrás, Adelante, Inicio y Actualizar. 

Barra de herramientas de ubicación Es la fila de opciones del explorador que 
incluye el campo posición. 

Barra de estado Es la zona situada en la parte inferior de la ventana del 
explorador en la que aparecen mensajes (como el tiempo de carga restante y los 
URL asociados a los vínculos). 

Barra de menús Es la zona de la ventana del explorador (Windows) o del 
escritorio (Macintosh) en la que aparecen menús tales como Archivo, Edición, 
Ver, Ir a y Ayuda. Esta opción debe establecerse explícitamente si desea que los 
usuarios puedan navegar desde la nueva ventana. Si no se ve esta opción, el 
usuario solamente podrá cerrar o minimizar la ventana (Windows), o cerrar la 
ventana y salir de la aplicación (Macintosh) desde la nueva ventana. 

Barras despl. si son necesarias Especifica que deberán aparecer las barras de 
desplazamiento que sean precisas si el contenido se extiende más allá de la zona 
visible. Si no se establece explícitamente esta opción, no aparecerán barras de 
desplazamiento. Si la opción Selectores de cambio de tamaño también está 
desactivada, los usuarios no tendrán forma alguna de ver el contenido situado 
más allá del tamaño original de la ventana. 

Selectores de cambio de tamaño Especifica que el usuario tenga la posibilidad 
de cambiar el tamaño de la ventana, bien arrastrando el ángulo inferior derecho 
de la ventana, o bien haciendo clic en el botón maximizar (Windows) o en el 
cuadro de tamaño (Macintosh) situado en la esquina superior derecha. Si esta 
opción no se establece explícitamente, los controles de cambio de tamaño no 
estarán disponibles y el ángulo inferior derecho no se podrá arrastrar. 

Nombre de ventana Es el nombre de la nueva ventana. Es imprescindible 
asignar un nombre a la ventana si desea usarla como destino de vínculos o 
controlarla con código JavaScript. 

5 Haga clic en Aceptar. 
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6 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. 

Reproducir sonido 

Utilice la acción Reproducir sonido para reproducir un sonido. Por ejemplo, 
puede hacer que se reproduzca un efecto sonoro cuando el cursor del ratón pase 
por encima de un vínculo, o que se reproduzca música al cargarse la página. 

Nota: Es posible que los exploradores precisen algún tipo de compatibilidad con audio 
(como un plug-in de audio, por ejemplo) para reproducir sonidos. 


Para usar la acción Reproducir sonido: 

1 Seleccione un objeto y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Reproducir sonido del 
menú emergente Acciones. 

3 Haga clic en Examinar para seleccionar un archivo de sonido o introduzca la 
ruta y el nombre del archivo en el campo Reproducir sonido. 

4 Haga clic en Aceptar. 

5 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. 

Mensaje emergente 

La acción Mensaje emergente presenta una alerta de JavaScript con el mensaje que 
usted desee. Dado que las alertas de JavaScript sólo tienen un botón (Aceptar), 
esta acción resulta más adecuada para proporcionar información que para 
proponerle una elección. 

Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra 
expresión de función JavaScript válida. Para incrustar una expresión JavaScript, 
enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra 
invertida (\{). 

Ejemplo El URL correspondiente a esta página es {window.location} y hoy es {new Date()}. 
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Para usar la acción Mensaje emergente: 

1 Seleccione un objeto y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Mensaje emergente del 
menú emergente Acciones. 

3 Introduzca el mensaje en el campo Mensaje. 

4 Haga clic en Aceptar. 

5 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. 

Carga previa de imágenes 

La acción Carga previa de imágenes carga imágenes que no aparecen en la página 
de inmediato (como aquellas que se intercambiarán por líneas de tiempo, 
comportamientos o secuencias de comandos de JavaScript) en la memoria caché 
del explorador. Esto contribuye a evitar los retrasos debidos a la descarga cuando 
llega el momento de que aparezcan las imágenes. 

Nota: La acción Intercambiar imagen carga automáticamente todas las imágenes resaltadas 
cuando se selecciona la opción Carga previa de imágenes en el cuadro de diálogo 
Intercambiar imagen, por lo que no es necesario agregar manualmente la acción Carga 
previa de imágenes al usar Intercambiar imagen. 

Para usar la acción Carga previa de imágenes: 

1 Seleccione un objeto y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Carga previa de imágenes del 
menú emergente Acciones. 

3 Haga clic en Examinar para seleccionar el archivo de imagen objeto de la carga 
previa o introduzca la ruta y el nombre de archivo en el campo Archivo de 
origen de imagen. 

4 Haga clic en el botón más (+), situado en la parte superior del cuadro de 
diálogo, para agregar la imagen deseada a la lista Carga previa de imágenes. 

Nota: Si no hace clic en el botón de signo más antes de introducir la siguiente imagen, la 
Imagen elegida será reemplazada en la lista por la siguiente imagen que elija. 

5 Repita los pasos 3 y 4 para todas las imágenes restantes que desee cargar en la 
página actual. 

6 Para eliminar una imagen de la lista Carga previa de imágenes, seleccione la 
imagen en la lista y haga clic en el botón de signo menos (-). 


Usar comportamientos 321 



7 Haga clic en Aceptar. 

8 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. 

Definir Imagen de barra de exploración 

Utilice la acción Definir Imagen de barra de exploración para convertir una 
imagen en una imagen de barra de exploración o para cambiar la visualización y 
las acciones de imágenes en una barra de exploración. (Para obtener más 
información, consulte “Insertar una barra de exploración”, en la página 125. 

Utilice la ficha Básico del cuadro de diálogo Definir Imagen de barra de 
exploración para crear o actualizar una imagen o grupo de imágenes de barra de 
exploración, cambiar el URL que debe mostrarse al hacer clic en un botón de una 
barra de exploración y seleccionar una ventana distinta en la que mostrar un URL. 

Utilice la ficha Avanzado del cuadro de diálogo Definir Imagen de barra de 
exploración para cambiar el estado de las imágenes de un documento en función 
del estado del botón actual. De forma predeterminada, al hacer clic en un 
elemento de una barra de exploración, todos los demás elementos recuperan su 
estado Arriba; utilice la ficha Avanzado si desea establecer un estado diferente para 
una imagen cuando la imagen seleccionada se encuentre su estado Abajo o Sobre. 

Para editar una acción Definir Imagen de barra de exploración: 

1 Seleccione una imagen en la barra de exploración para editarla y abra el 
inspector de comportamientos. 

2 En la columna Acciones del inspector de comportamientos, haga doble clic en 
la acción Definir Imagen de barra de exploración asociada al evento que está 
modificando. 

3 En la ficha Básico del cuadro de diálogo Definir Imagen de barra de 
exploración, seleccione opciones de edición de la imagen. 

Para configurar varias imágenes para un botón de la barra de exploración: 

1 Seleccione una imagen en la barra de exploración para editarla y abra el 
inspector de comportamientos. 

2 En la columna Acciones del inspector de comportamientos, haga doble clic en 
la acción Definir Imagen de barra de exploración asociada al evento que está 
modificando. 

3 Haga clic en la ficha Avanzado del cuadro de diálogo Definir Imagen de barra 
de exploración. 
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4 En el menú emergente Cuando el elemento está mostrado, elija un estado de 
imagen. 

• Elija Imagen abajo si desea cambiar la visualización de otra imagen después de 
que un usuario haya hecho clic en la imagen seleccionada. 

• Elija Sobre imagen o Sobre mientras imagen abajo si desea cambiar la 
visualización de otra imagen cuando el cursor pase sobre la imagen 
seleccionada. 

5 En la lista También definir imagen, seleccione otra imagen de la página que 
desee configurar. 

6 Haga clic en Examinar para seleccionar el archivo de imagen que desea que 
aparezca o escriba la ruta del archivo de imagen en el campo A archivo de 
imagen. 

7 Si seleccionó Sobre imagen o Sobre mientras imagen abajo en el paso 4, 
dispondrá de otra opción. En el campo de texto Si Abajo, a archivo de imagen, 
haga clic en Examinar para seleccionar el archivo de imagen o escriba la ruta del 
archivo de imagen que debe aparecer. 

Definir texto de marco 

La acción Definir texto de marco permite definir de forma dinámica el texto de un 
marco mediante la sustitución del contenido y el formato de un marco con el 
contenido que usted especifique. Dicho contenido puede incluir cualquier código 
HTML. Utilice esta acción para mostrar información de forma dinámica. 

Aunque la acción Definir texto de marco sustituye el formato de un marco, 
puede seleccionar Conservar color de fondo para conservar los atributos de color 
del fondo y el texto de la página. 

Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra 
expresión de función JavaScript válida. Para incrustar una expresión JavaScript, 
enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra 
invertida (\{). 

Ejemplo El URL correspondiente a esta página es {window.location} y hoy es {new Date()}. 

Para crear un conjunto de marcos: 

Elija Modificar > Conjunto de marcos > Dividir marco a la izquierda, a la derecha, 
hacia arriba o hacia abajo. 

Para obtener más información, consulte “Crear marcos”, en la página 266. 
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Para utilizar la acción Definir texto de marco: 

1 Seleccione un objeto y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Definir texto > Definir texto de 
marco del menú emergente Acciones. 

3 En el cuadro de diálogo Definir texto de marco, elija el marco de destino del 
menú emergente Marco. 

4 Haga clic en el botón Obtener HTML actual para copiar el contenido y el 
formato HTML del marco actual. 

5 Introduzca un mensaje en el campo Nuevo HTML y luego haga clic en 
Aceptar. 

6 Compruebe que el evento predeterminado es el que usted desea. Si no lo es, 
seleccione otro evento en el menú emergente. 

Si no ve los eventos que desea, cambie el explorador de destino en el menú 
emergente Eventos para. 

Definir texto de capa 

La acción Definir texto de capa reemplaza el contenido y el formato de una capa 
existente en una página con el contenido que usted especifique. Dicho contenido 
puede incluir cualquier código fuente HTML válido. 

Definir texto de capa sustituye el contenido y el formato de la capa, pero mantiene 
sus atributos, incluido el color. Puede aplicar formato al contenido mediante la 
inclusión de etiquetas HTML en el campo Nuevo HTML del cuadro de diálogo 
Definir texto de capa. 

Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra 
expresión de función JavaScript válida. Para incrustar una expresión JavaScript, 
enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra 
invertida (\{). 

Ejemplo El URL correspondiente a esta página es {window.location} y hoy es {new Date()}. 

Para crear una capa: 

1 Elija Insertar > Capa. 

Para obtener más información, consulte “Crear capas”, en la página 236. 

2 En el inspector de propiedades, introduzca un nombre para la capa. 
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Para adjuntar una acción Definir texto de capa: 

1 Seleccione un objeto y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Definir texto > Definir texto de 
capa del menú emergente Acciones. 

3 En el cuadro de diálogo Definir texto de capa, utilice el menú emergente Capa 
para elegir la capa de destino. 

4 Introduzca un mensaje en el campo Nuevo HTML y luego haga clic en 
Aceptar. 

5 Compruebe que el evento predeterminado es el que usted desea. Si no lo es, 
seleccione otro evento en el menú emergente. 

Si no ve los eventos que desea, cambie el explorador de destino en el menú 
emergente Eventos para. 

Definir texto de barra de estado 

La acción Definir texto de barra de estado muestra un mensaje en la barra de 
estado, situada en la parte inferior izquierda de la ventana del explorador. Por 
ejemplo, puede usar esta acción para describir el destino de un vínculo en la barra 
de estado en lugar de mostrar el URL al que está asociado. Para ver un ejemplo de 
mensaje de estado, pase el ratón por encima de cualquiera de los botones de 
exploración de la Ayuda de Dreamweaver. 

Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra 
expresión de función JavaScript válida. Para incrustar una expresión JavaScript, 
enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra 
invertida (\{). 

Ejemplo El URL correspondiente a esta página es {window.location} y hoy es {new Date()}. 

Para utilizar la acción Definir texto de barra de estado: 

1 Seleccione un objeto y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Definir texto > Definir texto de 
barra de estado del menú emergente Acciones. 

3 En el cuadro de diálogo Definir texto de barra de estado, escriba el mensaje en 
el campo Mensaje. 

Escriba un mensaje corto. El explorador cortará el mensaje si no cabe en la 
barra de estado. 

4 Haga clic en Aceptar. 
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5 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. 

Definir texto de campo de texto 

La acción Definir texto de campo de texto sustituye el contenido de un campo de 
texto de un formulario por el contenido que usted especifique. 

Puede incrustar en el texto cualquier llamada, propiedad, variable global u otra 
expresión de función JavaScript válida. Para incrustar una expresión JavaScript, 
enciérrela entre llaves ({}). Para que aparezca una llave, antepóngale una barra 
invertida (\{). 

Ejemplo El URL correspondiente a esta página es {window.location} y hoy es {new Date()}. 

Para crear un campo de texto con nombre: 

1 Elija Insertar > Objeto de formulario> Campo de texto. 

Para obtener más información, consulte “Crear formularios”, en la página 381. 

2 En el inspector de propiedades, introduzca un nombre para el campo de texto. 
Asegúrese de que el nombre no se repite en la página (no utilice el mismo 
nombre para varios elementos de la misma página aunque se encuentren en 
formularios distintos). 

Para utilizar la acción Definir texto de campo de texto: 

1 Seleccione un campo de texto y abra el inspector de comportamientos. 

2 Haga clic en el botón de signo más (+) y elija Definir texto > Definir texto de 
campo de texto del menú emergente Acciones. 

3 En el cuadro de diálogo Definir texto de campo de texto, elija el campo de texto 
de destino del menú emergente Campo de texto. 

4 Introduzca texto en el campo Nuevo texto y luego haga clic en Aceptar. 

5 Compruebe que el evento predeterminado es el que usted desea. Si no lo es, 
seleccione otro evento en el menú emergente. 

Si no ve los eventos que desea, cambie el explorador de destino en el menú 
emergente Eventos para. 
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Mostrar-Ocultar capas 

La acción Mostrar-Ocultar capas muestra, oculta o restaura la visibilidad 
predeterminada de una o más capas. Esta acción resulta útil para mostrar 
información a medida que el usuario va interactuando con la página. Por ejemplo, 
cuando el usuario pasa el cursor del ratón por encima de la imagen de una planta, 
se puede mostrar una capa que le ofrezca información sobre la época y región de 
crecimiento de la planta, las horas de sol que necesita, el tamaño que suele 
alcanzar, etc. 

La acción Mostrar-Ocultar capas también es útil para crear una capa de carga 
previa, es decir, una capa grande que en un principio oculta el contenido de la 
página y luego desaparece cuando todos los componentes de la página se han 
terminado de cargar. 


Para usar la acción Mostrar-Ocultar capas: 

1 Elija Insertar > Capa o haga clic en el botón Capa en la paleta de objetos y 
dibuje una capa en la ventana de documento. 

Repita este paso para crear capas adicionales. 

2 Haga clic en la ventana de documento para anular la selección de la capa y 
luego abra el inspector de comportamientos. 

3 Haga clic en el botón de signo más (+) y elija Mostrar-Ocultar capas del menú 
emergente Acciones. 

Si la acción Mostrar-Ocultar capas no está disponible, es muy probable que 
haya una capa seleccionada. Dado que las capas no aceptan eventos en la 
versión 4.0 de ninguno de los dos exploradores, deberá seleccionar un objeto 
diferente, como la etiqueta BODY, o un vínculo (etiqueta A), o bien cambiar el 
explorador de destino a IE 4.0 en el menú emergente Eventos para. 

4 Seleccione la capa cuya visibilidad desea cambiar en la lista Capas con nombre. 

5 Haga clic en Mostrar para mostrar la capa, en Ocultar para ocultarla, o en 
Predeterminada para restaurar la visibilidad predeterminada de la capa. 

6 Repita los pasos 4 y 5 para todas las capas restantes cuya visibilidad desee 
cambiar en este momento. 

7 Haga clic en Aceptar. 

8 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. 

Puede que las capas reduzcan su tamaño para ajustarse al contenido cuando se 
muestren en una ventana de Netscape Navigator. Para evitar que esto ocurra, 
agregue texto o imágenes a las capas o establezca valores de recorte de capa. 
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Para crear una capa de carga previa: 


1 


2 

3 

4 


5 


6 

7 

8 

9 

10 


Haga clic en el botón Capa en la paleta de objetos y arrastre una capa grande a 
la ventana de documento. 

Asegúrese de que la capa cubra todo el contenido de la página. 

En la paleta de capas, arrastre el nombre de la capa hasta la primera posición de 
la lista de capas para especificar que la capa debe estar encima de todas las 
demás en el orden de apilamiento. 

Asigne un nombre a la capa cargando en el campo de texto situado más a la 
izquierda en el inspector de propiedades. 

Con la capa todavía seleccionada, establezca el color de fondo de la capa con el 
mismo color que el del fondo de la página del inspector de propiedades. 



Haga clic dentro de la capa (que ahora debe estar ocultando el resto del 
contenido de la página) y, si lo desea, escriba un mensaje. 

Por ejemplo, los mensajes “Espere a que se cargue la página” o “Cargando...” 
informan a los usuarios de lo que está ocurriendo para que sepan que la página 
tiene contenido. 

Haga clic en la etiqueta <body> en el selector de etiquetas, situado en el ángulo 
inferior izquierdo de la ventana de documento. 

En el inspector de comportamientos, seleccione Mostrar-Ocultar capas en el 
menú emergente Acciones. 

Seleccione la capa llamada cargando en la lista de Capas con nombre. 

Haga clic en Ocultar. 

Haga clic en Aceptar. 
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Intercambiar imagen 

La acción Intercambiar imagen intercambia una imagen por otra cambiando el 
atributo SRC de la etiqueta IMG. Use esta acción para crear sustituciones de botones 
y otros efectos de imágenes (incluido el intercambio de varias imágenes a la vez). 

Nota: Dado que sólo el atributo SRC se ve afectado por esta acción, el intercambio debe 
hacerse con imágenes que tengan las mismas dimensiones (altura y anchura) que la Imagen 
original para evitar distorsiones. 

Para usar la acción Intercambiar imagen: 

1 Elija Insertar > Imagen o haga clic en el botón Imagen en la paleta de objetos 
para insertar una imagen. 

2 En el inspector de propiedades, introduzca un nombre para la imagen en el 
campo de texto situado más a la izquierda. 

La acción Intercambiar imagen continuará funcionando aunque no asigne 
nombres a las imágenes, ya que asigna un nombre automáticamente a las 
imágenes sin nombre cuando se adjunta el comportamiento a un objeto. No 
obstante, resultará más fácil distinguir las imágenes en el cuadro de diálogo 
Intercambiar imagen si todas las imágenes disponen ya de un nombre. 

3 Repita los pasos 1 y 2 para insertar más imágenes. 

4 Seleccione un objeto (normalmente, la imagen que va a intercambiar) y abra el 
inspector de comportamientos. 

5 Haga clic en el botón de signo más (+) y elija Intercambiar imagen del 
menú emergente Acciones. 

6 Seleccione la imagen cuyo origen desea cambiar de la lista Imágenes. 

7 Haga clic en Examinar para seleccionar el archivo de la nueva imagen o 
introduzca la ruta y el nombre de archivo de la nueva imagen en el campo 
Definir origen como. 

8 Repita los pasos 6 y 7 para todas las demás imágenes que desee cambiar. 

9 Seleccione la opción Carga previa de imágenes para cargar las nuevas imágenes 
en la memoria caché del explorador al cargar la página. 

Esto contribuye a evitar los retrasos debidos a la descarga cuando llega el 
momento de que aparezcan las imágenes. 

10 Haga clic en Aceptar. 

11 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. 
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Restaurar imagen intercambiada 

La acción Restaurar imagen intercambiada restaura el último conjunto de imágenes 
intercambiadas a sus archivos de origen anteriores. Esta acción se agrega 
automáticamente siempre que se adjunta la acción Intercambiar imagen a un objeto; si 
dejó seleccionada la opción Restaurar al adjuntar Intercambiar imagen, no tendrá que 
seleccionar manualmente la acción Restaurar imagen intercambiada. 


Ir a marco de línea de tiempo 

La acción Ir a marco de línea de tiempo desplaza el cabezal de reproducción al 
marco especificado. Esta acción puede usarse en el canal Behavior del inspector de 
líneas de tiempo para hacer que una parte de una línea de tiempo se reproduzca en 
bucle un número determinado de veces, para crear un vínculo o botón Rebobinar 
o para permitir al usuario saltar a distintas partes de la animación. 

Para usar la acción Ir a marco de línea de tiempo: 

1 Elija Ventana > Línea de tiempo para abrir el inspector de líneas de tiempo y 
asegúrese de que el documento contiene una línea de tiempo. 

Si no ve ninguna barra de animación de color morado en el inspector de líneas 
de tiempo, el documento no contiene ninguna línea de tiempo. Consulte 
“Crear una animación de líneas de tiempo”, en la página 255. 

2 Seleccione un objeto. 

Para adjuntar el comportamiento a un marco de la línea de tiempo, haga clic en 
el canal Behavior en el marco deseado. 

3 Abra el inspector de comportamientos. 

4 Haga clic en el botón de signo más (+) y elija Línea de tiempo > Ir a marco de 
línea de tiempo del menú emergente Acciones. 

5 Seleccione una línea de tiempo del menú emergente Línea de tiempo. 

6 Introduzca un número de marco en el campo Ir a marco. 

7 Si está agregando esta acción al canal Behavior de una línea de tiempo y desea 
que una parte de la línea de tiempo se reproduzca en bucle, introduzca en el 
campo Bucle el número de veces que éste debe repetirse. 

Este campo debe dejarse en blanco si la acción Ir a marco de línea de tiempo no 
se está adjuntando a un marco de una línea de tiempo. 

8 Haga clic en Aceptar. 

9 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. 
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Reproducir línea de tiempo y Detener línea de tiempo 

Use las acciones Reproducir línea de tiempo y Detener línea de tiempo para 
permitir a los usuarios iniciar y detener una línea de tiempo haciendo clic en un 
vínculo o en un botón; o iniciar y detener una línea de tiempo automáticamente 
cuando el usuario pasa el ratón por encima de un vínculo, una imagen u otro 
objeto. La acción Reproducir línea de tiempo se adjunta automáticamente a la 
etiqueta BODY con el evento onLoad cuando se selecciona Rep. Autom. en el 
inspector de líneas de tiempo. 

Para usar las acciones Reproducir línea de tiempo y Detener línea de tiempo: 

1 Elija Ventana > Línea de tiempo para abrir el inspector de líneas de tiempo y 
asegúrese de que el documento contiene una línea de tiempo. 

Si no ve ninguna barra de animación de color morado en el inspector de líneas 
de tiempo, el documento no contiene ninguna línea de tiempo. Consulte 
“Crear una animación de líneas de tiempo”, en la página 255. 

2 Seleccione un objeto y abra el inspector de comportamientos. 

3 Haga clic en el botón de signo más (+) y elija Reproducir línea de tiempo o 
Detener línea de tiempo del menú emergente Acciones. 

4 Seleccione la línea de tiempo que desea reproducir o detener, o elija detener 
todas las líneas de tiempo, en el menú emergente. 

5 Haga clic en Aceptar. 

6 Compruebe que el evento predeterminado es el que usted desea. 

Si no lo es, seleccione otro evento en el menú emergente. Si los eventos que 
busca no aparecen en la lista, cambie el explorador de destino en el menú 
emergente Eventos para. 

Validar formulario 

La acción Validar formulario comprueba el contenido de los campos de texto 
especificados para asegurarse de que el usuario ha introducido el tipo correcto de 
datos. Adjunte esta acción a campos de formulario individuales con el evento 
onBlur para validar los campos conforme el usuario vaya rellenando el formulario, 
o adjúntela al formulario con el evento onSubmit para evaluar varios campos 
cuando el usuario haga clic en el botón Enviar. Al adjuntar esta acción a un 
formulario, se evita que éste sea enviado al servidor si alguno de los campos 
especificados contiene datos no válidos. 
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Para usar la acción Validar formulario: 

1 Elija Insertar > Formulario o haga clic en el botón Formulario en la paleta de 
objetos para insertar un formulario. 

2 Elija Insertar > Objeto de formulario > Campo de texto o haga clic en el botón 
Campo de texto en la paleta de objetos para insertar un campo de texto. 

Repita este paso para insertar más campos de texto. 

3 Lleve a cabo una de estas operaciones: 

• Para validar campos individuales conforme el usuario va rellenándolos en el 
formulario, seleccione un campo de texto y elija Ventana > Comportamientos. 

• Para validar múltiples campos cuando el usuario envía el formulario, haga clic 
en la etiqueta <form> en el selector de etiquetas, situado en el ángulo inferior 
izquierdo de la ventana de documento, y elija Ventana > Comportamientos. 

4 Seleccione Validar formulario en el menú emergente Acciones. 

5 Lleve a cabo una de estas operaciones: 

• Si está validando campos individuales, seleccione el mismo campo que 
seleccionó en la ventana de documento en la lista de Campos con nombre. 

• Si está validando múltiples campos, seleccione un campo de texto en la lista de 
Campos con nombre. 

6 Seleccione la opción Obligatorio si el campo debe contener algún dato. 

7 Elija una de las siguientes opciones Aceptar: 

• Use Cualquier cosa si el campo es obligatorio pero no tiene que contener 
ningún tipo de dato determinado. (Si no está seleccionado Obligatorio, esta 
opción carece de sentido (es lo mismo que si la acción Validar formulario no se 
hubiera adjuntado al campo). 

• Use Dirección de correo electrónico para comprobar si el campo contiene un 
símbolo arroba (@). 

• Use Número para comprobar que el campo contiene solamente caracteres 
numéricos. 

• Use Número del para comprobar que el campo contiene solamente caracteres 
numéricos dentro de un rango determinado. 

8 Si está validando múltiples campos, repita los pasos 6 y 7 para cada uno de los 
campos que desee validar. 

9 Haga clic en Aceptar. 

Si está validando múltiples campos cuando el usuario envía el formulario, en el 
menú emergente Eventos aparecerá automáticamente el evento onSubmit. 
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10 Si está validando campos individuales, compruebe que el evento 
predeterminado sea onBlur u onChange. 

Si no lo es, seleccione onBlur u onChange en el menú emergente. Cualquiera de 
estos dos eventos desencadena la acción Validar formulario cuando el usuario 
abandona el campo. La diferencia entre ellos estriba en que onBlur tiene lugar 
independientemente de que el usuario haya escrito algo en el campo, mientras 
que onChange tiene lugar sólo si el usuario ha cambiado el contenido del campo 
de algún modo. El evento onBlur es preferible si ha configurado el campo como 
obligatorio. 


Actualizar un comportamiento 

Si sus páginas contienen comportamientos creados con una versión anterior de 
Dreamweaver, dichos comportamientos no se actualizarán automáticamente al 
abrir las páginas con la versión actual de Dreamweaver. No obstante, al actualizar 
una ocurrencia de un comportamiento en una página, también se actualizarán 
todas las demás ocurrencias de dicho comportamiento en la página. 

Para actualizar un comportamiento en una página: 

1 Seleccione un elemento que tenga el comportamiento adjunto a él. 

2 Abra el inspector de comportamientos. 

3 Haga doble clic en el comportamiento. 

4 Haga clic en Aceptar en el cuadro de diálogo del comportamiento. 

Se actualizarán todas las ocurrencias de dicho comportamiento en dicha página. 
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CAPÍTULO 13 

Editar HTML 


Dreamweaver proporciona interfaces gráficas para la creación y edición de 
archivos HTML. No obstante, es posible que a veces tenga que acudir 
directamente al código HTML subyacente. Dreamweaver permite acceder al 
código a través del inspector de código Fuente HTML (consulte “Utilizar el 
inspector de código Fuente HTML”, en la página 336) y de Quick Tag Editor 
(consulte “Editar una etiqueta HTML en la ventana de documento”, en la 
página 338). 

Dreamweaver también proporciona formas útiles de manipular los archivos 
HTML creados fuera de Dreamweaver. Con Roundtrip HTML, tendrá la 
absoluta garantía de que Dreamweaver no cambiará el código HTML que haya 
modificado manualmente, a no ser que así lo desee; puede configurar una amplia 
gama de opciones relativas a lo que Dreamweaver debe reescribir y lo que no debe 
tocar. (Consulte “Configurar preferencias de formato HTML”, en la página 344.) 
Y a la inversa, Dreamweaver puede limpiar el código HTML acumulado de forma 
innecesaria conforme a sus preferencias mediante las funciones Limpiar HTML y 
Limpiar HTML de Word (consulte “Limpiar HTML”, en la página 348 y 
“Limpiar HTML de Microsoft Word”, en la página 350). 


Roundtrip HTML 

Roundtrip HTML es una función exclusiva de Dreamweaver que permite pasar 
los documentos de un editor HTML basado en texto a Dreamweaver y a la inversa 
sin que se vean prácticamente afectados el contenido y la estructura del código 
fuente HTML original del documento. Dreamweaver mantiene y ofrece incluso 
algunos códigos HTML que técnicamente no son válidos (como es el caso de la 
etiqueta FONT envuelta en múltiples etiquetas P) si dicho código es compatible con 
los exploradores. No obstante, el código fuente HTML que genera Dreamweaver 
mientras usted edita gráficamente es siempre técnicamente válido. 



Estas son las principales características de Roundtrip HTML: 

• De forma predeterminada, Dreamweaver reescribe las etiquetas solapadas, 
cierra las etiquetas abiertas para las que no está permitido permanecer abiertas y 
elimina las etiquetas de cierre sobrantes al regresar a Dreamweaver desde un 
editor de HTML externo o al abrir un documento HTML existente. Si no 
desea que Dreamweaver reescriba ningún código fuente HTML, elija Edición > 
Preferencias y seleccione Reescritura de HTML para desactivar todas las 
funciones de reescritura. Consulte “Configurar preferencias de reescritura de 
HTML”, en la página 344. 

• Dreamweaver muestra marcadores en la ventana de documento para aquellos 
códigos HTML no válidos con los que no es compatible. Las etiquetas no 
válidas se resaltan en color amarillo. Cuando se selecciona una etiqueta no 
válida, Dreamweaver muestra información en el inspector de propiedades 
acerca de cómo corregir el error. Si desactiva la reescritura del código HTML, 
todos aquellos códigos HTML que Dreamweaver habría reescrito se mostrarán 
como no válidos. 

• Dreamweaver no cambia las etiquetas que no reconoce (incluidas las etiquetas 
XML), ya que carece de criterios para juzgar cuáles son válidas y cuáles no lo 
son. Si hay una etiqueta irreconocible que se solapa con una válida, 
Dreamweaver puede marcarla como errónea, pero no reescribe el código. Por 
ejemplo, la etiqueta personalizada del ejemplo siguiente se marcaría como 
errónea: < MyNewTag > < b >text </MyNewTag > </b >. 

• Dreamweaver no modifica las etiquetas de ColdFusion Markup Language 
(CFML) ni las de Microsoft Active Server Page (ASP), al tiempo que muestra 
iconos para identificar bloques de código CFML o ASP en la ventana de 
documento siempre que esto resulte posible. Consulte “Editar archivos de 
ColdFusion y Active Server en Dreamweaver”, en la página 353. 

• Dreamweaver permite iniciar un editor de HTML basado en texto para editar 
el documento actual. Dreamweaver está integrado con HomeSite (Windows) y 
BBEdit (Macintosh). Consulte “Usar editores de HTML externos”, en la 
página 352. 


Utilizar el inspector de código Fuente HTML 

El inspector de código Fuente HTML muestra el código fuente HTML del 
documento actual. Las etiquetas se codifican mediante colores de acuerdo con la 
configuración establecida en las preferencias. Consulte “Configurar preferencias 
de colores HTML”, en la página 347. Conforme agregue o cambie el contenido 
en la ventana de documento, Dreamweaver mostrará de forma inmediata los 
cambios en el inspector de código Fuente HTML. Esto convierte al inspector de 
código Fuente HTML en una herramienta muy útil para aprender a utilizar el 
código HTML si no lo conoce aún, o para refrescar la memoria sobre la sintaxis y 
los valores correctos para etiquetas o atributos concretos. 
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Los cambios que realice en el inspector de código Fuente HTML no aparecerán en 
la ventana de documento hasta que haga clic fuera del inspector de código Fuente 
HTML. Dreamweaver nunca reescribe el código HTML que usted escribe 
directamente en el inspector de código Fuente HTML; si introduce aquí código 
HTML no válido, Dreamweaver resaltará las etiquetas como no válidas cuando 
haga clic en la ventana de documento. 


Para abrir el inspector de código Fuente HTML, lleve a cabo una de estas 
operaciones: 

• Elija Ventana > Fuente HTML. 

• Haga clic en el icono del inspector de código Fuente HTML en el lanzador o 
en el minilanzador (situado en la esquina inferior derecha de la ventana de 
documento). 

• Pulse FIO. 



En el inspector de código Fuente HTML, puede activar o desactivar el ajuste del 
texto mediante la selección o la anulación de la opción Ajuste. (Tenga en cuenta 
que la activación del ajuste de línea no introduce saltos de línea en el código 
HTML; sencillamente se muestran las líneas como si estuvieran ajustadas para 
facilitar su visualización.) También puede especificar si deben o no mostrarse los 
números de línea mediante la selección o anulación de la opción Números de 
líneas. 

Para iniciar un editor de HTML externo, haga clic en el botón Editor externo. Si 
no ha elegido ningún editor de HTML externo, deberá elegir primero Edición > 
Preferencias, seleccione la categoría Editores externos y elija un editor externo. 
Para obtener más información, consulte “Usar editores de HTML externos”, en la 
página 352. 

Para alternar entre la ventana de documento y el inspector de código Fuente 
HTML: 

Pulse Control+Tab (Windows y Macintosh). 
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Editar una etiqueta HTML en la ventana de 
documento 

Utilice Quick Tag Editor (editor rápido de etiquetas) para inspeccionar 
rápidamente y editar el código fuente HTML de una sola etiqueta dentro de la 
ventana de documento sin necesidad de cambiar al inspector de código Fuente 
HTML y cambiar de nuevo a la ventana de documento. La forma más fácil de 
abrir Quick Tag editor es pulsando Control+T (Windows) o Comando+T 
(Macintosh). 

Quick Tag Editor dispone de estos tres modos de funcionamiento: 

• Insertar HTML, que se utiliza para insertar código HTML nuevo. 

• Editar etiqueta, que se utiliza para editar una etiqueta existente. 

• Ajustar etiqueta, que se utiliza para ajustar una nueva etiqueta alrededor de la 
selección actual. 

La selección actual de la ventana de documento determina el modo en el que se 
abre Quick Tag Editor. 

Nota: Cuando se abre Quick Tag Editor, puede cambiar de un modo a otro mediante el 
mismo método abreviado de teclado que se utiliza para abrir Quick Tag Editor. 

El funcionamiento básico de Quick Tag Editor es el mismo en los tres modos: se 
abre el editor, se introducen o se editan las etiquetas o atributos y se cierra el 
editor. La diferencia entre los distintos modos estriba en lo que Dreamweaver hace 
con las etiquetas cuando usted las ha editado. Para obtener más detalles sobre los 
modos, consulte “Modo Insertar HTML”, en la página 342, “Modo Editar 
etiqueta”, en la página 342 y “Modo Ajustar etiqueta”, en la página 342. 

Nota: Cuando Quick Tag Editor esté visible en cualquiera de sus modos, podrá arrastrar el 
manejador del editor (en el que aparece el nombre del modo) para desplazar el editor por la 
pantalla. 

Para llevar a cabo una edición en mayor profundidad del código HTML, utilice el 
inspector de código Fuente HTML. 


Para introducir o editar etiquetas y atributos en Quick Tag Editor: 

1 Lleve a cabo una de estas operaciones: 

• Seleccione un objeto, un fragmento de texto o una etiqueta. 

• Haga clic en la ventana de documento para colocar el punto de inserción sin 
seleccionar ningún elemento. 
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2 Pulse Control+T (Windows) o Comando+T (Macintosh), o bien haga clic en el 
botón Quick Tag Editor del inspector de propiedades. 

Quick Tag Editor se abre en el modo que resulte adecuado en función de la 
selección actual. 



En el modo Insertar HTML o en el modo Ajustar etiqueta, es posible 
introducir una etiqueta HTML; en el modo Editar etiqueta, es posible 
introducir nuevos atributos, editar los atributos existentes o editar el nombre de 
la etiqueta. 

3 Para editar los valores o nombres de atributos existentes (o para editar el 
nombre de la etiqueta), pulse Tab para avanzar de un elemento al siguiente 
hasta que se seleccione el atributo (o etiqueta) que desea editar. Pulse 
Mayús+Tab para retroceder al nombre de atributo, valor de atributo o nombre 
de etiqueta anterior. 
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4 Si hace una pausa durante un par de segundos mientras edita un nombre de 
atributo, aparecerá un menú desplegable de sugerencias en el que se enumeran 
los atributos válidos para la etiqueta que está editando. (Si Dreamweaver no 
reconoce la etiqueta que está editando, el menú de sugerencias contendrá todos 
los atributos que Dreamweaver reconoce para todas las etiquetas.) El menú de 
sugerencias no aparece si ha anulado la selección de la opción Activar 
sugerencias de etiquetas en el panel de Quick Tag Editor del cuadro de diálogo 
Preferencias. Controle el menú de sugerencias de las siguientes formas: 

• Al comenzar a escribir un nombre de atributo, el menú de sugerencias se 
desplaza para resaltar el primer nombre de etiqueta que comience por las letras 
introducidas. 

• Para desplazar el resaltado hacia arriba o hacia abajo en el menú, utilice las 
teclas de flecha arriba y abajo o la barra de desplazamiento. 

• Para elegir el nombre del atributo resaltado, pulse Entrar (Windows) o Retorno 
(Macintosh); el nombre del atributo resaltado se introducirá en Quick Tag 
Editor. Como alternativa, haga doble clic en un nombre de atributo en el menú 
para introducirlo. 

• Para prescindir del menú de sugerencias sin seleccionar ninguna entrada, pulse 
Esc o simplemente continúe escribiendo. 

Al hacer una pausa mientras introduce o edita un nombre de etiqueta, 
aparecerá un menú desplegable de sugerencias similar en el que se enumeran los 
nombres de etiquetas en lugar de los nombres de atributos. 

5 En el modo Editar etiqueta, si realiza algún cambio y pulsa Tab o Mayús+Tab, 
el cambio se aplicará inmediatamente. Para evitar que los cambios se realicen 
hasta que salga de Quick Tag Editor, anule la selección de Aplicar cambios 
inmediatamente al editar en el panel de Quick Tag Editor del cuadro de 
diálogo Preferencias. 

Nota: Cuando no esté seleccionada la opción Aplicar cambios inmediatamente al editar, 
los diversos cambios que aplique de una vez aparecerán como un solo paso en la paleta 
de marcador y podrán deshacerse con un único comando Deshacer. 

6 Para agregar un nuevo atributo a una etiqueta, utilice las teclas Tab, las teclas de 
flecha y la barra espaciadora para desplazar el punto de inserción al lugar en el 
que desea agregar el atributo. Comience a escribir un nombre de atributo válido 
para la etiqueta. El menú desplegable de sugerencias aparece cuando se hace 
una pausa al escribir, al igual que ocurre cuando se editan atributos. 

7 Continúe editando y agregando los nombres de atributos y valores que desee. 
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8 Cuando termine de editar la etiqueta, salga de Quick Tag Editor de una de 
estas formas: 

• Para salir y prescindir de todos los cambios realizados y no aplicados, pulse Esc. 
(Si estaba utilizando el modo Editar etiqueta con la opción Aplicar cambios 
inmediatamente al editar seleccionada, se conservarán todos los cambios que 
hayan sido aplicados.) 

• Para salir y aplicar todos los cambios, pulse Entrar (Windows) o Retorno 
(Macintosh) o haga clic fuera de Quick Tag Editor. 

9 Si utiliza un código HTML no válido en Quick Tag Editor, Dreamweaver 
intentará corregirlo insertando comillas finales y paréntesis angulares en los 
lugares que sean precisos. 

Para seleccionar la etiqueta padre de la etiqueta actual (la etiqueta que contiene a 

la etiqueta actual): 

Lleve a cabo una de estas operaciones: 

• Pulse Control+Mayús+< (Windows) o Comando+Mayús+< (Macintosh). 

• Elija Edición > Seleccionar etiqueta padre. 

Para seleccionar la primera etiqueta hija contenida en la etiqueta actual: 

Lleve a cabo una de estas operaciones: 

• Pulse Control+Mayús+> (Windows) o Comando+Mayús+> (Macintosh). 

• Elija Edición > Seleccionar hijo. 

Nota: Si la etiqueta actual no contiene ninguna otra etiqueta, Seleccionar hijo seleccionará 

el contenido de la etiqueta actual. 


Para alternar entre los distintos modos de Quick Tag Editor: 

Con Quick Tag Editor activo, pulse .Control+T (Windows) o Comando+T 
(Macintosh). 

Quick Tag Editor cambiará de modo cada vez que utilice el método abreviado de 
teclado, alternando entre el modo Insertar HTML, Editar etiqueta y Ajustar 
etiqueta. 
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Modo Insertar HTML 


Quick Tag Editor se inicia en el modo Insertar HTML al abrirlo sin que exista 
ninguna selección. Se abrirá con un par de paréntesis angulares con el punto de 
inserción entre ellos. Puede introducir cadenas HTML arbitrarias en este modo 
del editor, incluidas múltiples etiquetas y texto u otro tipo de contenido entre las 
etiquetas. Al cerrar el editor, el código HTML introducido se introduce en el 
punto de inserción; si deja etiquetas sin cerrar, las etiquetas de cierre 
correspondientes se agregarán automáticamente. 


Modo Editar etiqueta 

Quick Tag Editor se inicia en el modo Editar etiqueta cuando la selección actual 
consta de una etiqueta completa (una etiqueta inicial más su correspondiente 
etiqueta de cierre si resulta aplicable, además del contenido de la etiqueta en el 
caso de que exista). Por ejemplo, si la selección es una imagen, o si es una etiqueta 
FONT y su correspondiente etiqueta /PONT, además del texto comprendido entre 
éstas dos, Quick Tag Editor se iniciará en el modo Editar etiqueta. La forma más 
sencilla de asegurarse de que la selección actual se inicia y termina con las etiquetas 
adecuadas consiste en seleccionar una etiqueta del selector de etiquetas situado en 
la parte inferior izquierda de la ventana de documento. 

Quick Tag Editor también se inicia en el modo Editar etiqueta cuando la selección 
actual incluye una etiqueta inicial o de cierre sin su correspondiente pareja. En este 
caso, la selección se amplía para incluir la etiqueta padre de la selección actual y su 
contenido. Por ejemplo, si el párrafo actual está formado por el código HTML 
<p>Estaban leyendo <c¡te>Historia de dos ciudades</cite> en clase. </p>, y la 
selección actual es leyendo <cite>Historia de, sin la etiqueta de cierre </c¡te>, Quick 
Tag Editor se iniciará en el modo Editar etiqueta con el párrafo entero 
seleccionado. 

En el modo Editar etiqueta, puede editar una sola etiqueta inicial. Si mueve el 
punto de inserción más allá del final de la etiqueta e introduce más de una 
etiqueta, aparecerá un mensaje de error y se prescindirá de todo lo que haya 
introducido. 


Modo Ajustar etiqueta 

Cuando la selección actual consta de cualquier cosa que no sea una etiqueta 
completa (una etiqueta inicial más su correspondiente etiqueta de cierre si resulta 
aplicable, además del contenido de la etiqueta en el caso de que exista), Quick Tag 
Editor se inicia normalmente en el modo Ajustar etiqueta. Por ejemplo, si la 
selección actual es texto sin ningún formato especial, Quick Tag Editor se abrirá 
en el modo Ajustar etiqueta. 

Hay una excepción a esta regla: cuando la selección actual incluye una etiqueta 
inicial o de cierre sin su correspondiente pareja, Quick Tag Editor se inicia en el 
modo Editar etiqueta en lugar del modo Ajustar etiqueta, al tiempo que amplía la 
selección a la etiqueta padre de la selección actual y su contenido. 
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En el modo Ajustar etiqueta, puede introducir una sola etiqueta inicial. Si 
introduce más de una etiqueta, aparecerá un mensaje de error y se prescindirá de 
todo lo que haya introducido. 

Al cerrar el editor, la etiqueta introducida se insertará al comienzo de la selección 
actual y se introducirá la etiqueta de cierre correspondiente al final de la selección 
actual. 

Menús de sugerencias 

Los menús desplegables de sugerencias muestran etiquetas y atributos del archivo 
TagAttributeList.txt, situado en la carpeta Dreamweaver/Configuration. Puede 
agregar y quitar etiquetas de este archivo para facilitar la edición del código 
HTML. 

Eliminar una etiqueta 

Para eliminar una etiqueta del documento (sin tocar su contenido, en el caso de 
que éste exista), lleve a cabo una de estas operaciones: 

• Seleccione la etiqueta en el selector de etiquetas, situado en la parte inferior 
izquierda de la ventana de documento. Luego elija Quitar etiqueta del menú 
contextual. 

• Seleccione cualquier cosa en la ventana de documento o haga clic para situar el 
punto de inserción en la ventana. Luego elija Quitar etiqueta del menú 
contextual. 

Nota: No todas las etiquetas pueden eliminarse. 


Configurar preferencias de Quick Tag Editor 

Las preferencias de Quick Tag Editor permiten controlar si las ediciones que 
realice en dicho editor deben actualizarse automáticamente en la ventana de 
documento. También puede ajustar los controles para el menú desplegable de 
sugerencias. Utilice el menú Edición > Preferencias para acceder al panel de 
preferencias de Quick Tag Editor. 

Aplicar cambios inmediatamente al editar Controla si los cambios realizados con 
Quick Tag Editor deben actualizarse automáticamente en el documento al pasar 
de un atributo a otro en el modo Editar etiqueta. Si desactiva esta opción, deberá 
pulsar Entrar para aplicar los cambios al documento. (Esta opción no surte efecto 
en los modos Insertar HTML y Ajustar etiqueta; en dichos modos, deberá pulsar 
siempre Entrar para aplicar los cambios al documento.) 

Activar sugerencias de etiquetas Controla si debe mostrarse la lista de sugerencias 
al escribir en Quick Tag Editor. También puede ajustar la duración del período 
que debe transcurrir antes de que aparezca el menú desplegable de sugerencias 
para el atributo o la etiqueta actual. 
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Configurar preferencias de formato HTML 

Puede configurar las siguientes preferencias para la aplicación de formato al código 
fuente HTML en Dreamweaver. 

• Las preferencias de Reescritura de HTML determinan los cambios que 
Dreamweaver debe realizar en el código fuente HTML cuando se abre un 
documento HTML. Consulte “Configurar preferencias de reescritura de 
HTML”, en la página 344. 

• Las preferencias de Formato HTML determinan opciones comunes de 
aplicación de formato HTML, como la longitud de las líneas y la sangría. 
Consulte “Configurar preferencias de formato HTML”, en la página 345. Estas 
preferencias proporcionan una interfaz de usuario para la modificación del 
archivo SourceFormat.txt. 

• Las preferencias de Colores HTML controlan la codificación por colores de las 
etiquetas HTML (y del texto situado entre ellas) en el inspector de código 
Fuente HTML. Consulte “Configurar preferencias de colores HTML”, en la 
página 347. 

• Las preferencias de Fuentes/codificación permiten especificar la fuente con la 
que aparecerá el código fuente HTML en el inspector de código Fuente 
HTML. Consulte “Configurar preferencias de fuentes/codificación”, en la 
página 73. 

Finalmente, el archivo SourceFormat.txt (situado en la carpeta Dreamweaver/ 
Configuration) proporciona especificaciones precisas para la aplicación de formato 
HTML. La edición de este archivo con un editor de texto le confiere el máximo 
control posible sobre cómo debe escribir Dreamweaver el código HTML; en este 
archivo podrá cambiar determinadas opciones específicas de algunas etiquetas que 
no pueden modificarse utilizando las preferencias de Formato HTML. No 
obstante, es recomendable que este archivo sólo lo editen los usuarios y 
diseñadores avanzados de Dreamweaver, dado que las posibilidades de provocar 
errores graves en el programa Dreamweaver son bastante elevadas. Consulte 
“Editar el perfil de formato del código fuente HTML”, en la página 397. 


Configurar preferencias de reescritura de HTML 

Las preferencias de Reescritura de HTML determinan lo que Dreamweaver debe 
hacer al abrir documentos HTML. Estas preferencias no tienen ningún efecto 
cuando se edita código HTML en el inspector de código Fuente HTML. Si 
desactiva las opciones de reescritura, Dreamweaver mostrará elementos de formato 
no válidos en la ventana de documento para el código HTML que habría sido 
reescrito. Si importa un documento HTML desde Word, podrá utilizar el 
comando Limpiar HTML de Word para eliminar todos los códigos HTML que 
no sean necesarios. Consulte “Limpiar HTML de Microsoft Word”, en la 
página 350 para obtener más información. 
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Etiquetas no cerradas y mal anidadas Reescribe las etiquetas mal anidadas y 
solapadas. Por ejemplo, <bxi>text</b></¡> se reescribe como <bxi>text</ 
¡x/b>. Esta opción también inserta comillas y paréntesis de cierre en el caso de 
que no estuvieran presentes. 

Eliminar etiquetas de cierre adicionales Elimina las etiquetas de cierre para las que 
no existe la correspondiente etiqueta inicial. 

Advertir al solucionar/eliminar etiquetas Muestra un resumen del código HTML 
técnicamente no válido que Dreamweaver ha intentado corregir. En dicho 
resumen se indica la ubicación del problema (a través de números de línea y de 
columna) para que pueda localizar la corrección y asegurarse de que el resultado es 
el que usted desea. 

Nunca reescribir HMTL: En archivos con extensiones: Impide que Dreamweaver 
reescriba el código HTML de los archivos que tengan las extensiones de nombre 
de archivo indicadas. Esta opción es especialmente útil para tipos de archivos que 
contengan etiquetas de terceros (como las etiquetas ASP, por ejemplo). Para 
obtener más información, consulte “Evitar la reescritura de etiquetas de terceros”, 
en la página 410. 

Las dos opciones de Caracteres especiales permiten controlar si Dreamweaver debe 
codificar determinados caracteres en contextos concretos. Por lo general, es 
recomendable dejar estas opciones seleccionadas, a no ser que sus archivos 
contengan determinadas etiquetas de terceros que empleen los caracteres en 
cuestión. Para obtener más información sobre estas opciones, consulte “Evitar la 
reescritura de etiquetas de terceros”, en la página 410. 


Configurar preferencias de formato HTML 

Utilice las siguientes preferencias de Formato HTML para controlar la aplicación 
de formatos HTML tales como sangría, longitud de línea y si los nombres de 
etiquetas y atributos deben aparecer en mayúsculas o minúsculas conforme cree 
documentos. Para obtener información sobre controles adicionales de aplicación 
de formato HTML, consulte “Editar el perfil de formato del código fuente 
HTML”, en la página 397. Tenga en cuenta que las siguientes opciones (salvo 
Anular may/min de) sólo afectan a los nuevos documentos y a las nuevas adiciones 
a documentos existentes (en la ventana de documento). Es decir, cuando abra un 
documento HTML creado previamente, estas opciones de formato no le 
afectarán; para cambiar el formato de documentos HTML existentes, utilice el 
comando Aplicar formato de origen. Consulte “Aplicar formato al código fuente 
HTML en documentos existentes”, en la página 349. 

Nota: Estas opciones sólo afectan a los cambios realizados en la ventana de documento, no 
a los aplicados al editar el código HTAAL directamente en el Inspector de código Fuente 
HTAAL. 
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Sangría Activa la sangría de todas las etiquetas marcadas con INDENT en el archivo 
SourceFormat.txt. Consulte “Editar el perfil de formato del código fuente 
HTML”, en la página 397. 

Usar Especifica si la sangría debe realizarse utilizando espacios o tabuladores. 

Filas y columnas de tabla Aplica automáticamente una sangría a las etiquetas TR y 
TD para facilitar la lectura del código de tablas. Para que funcione esta opción, la 
opción Sangría debe estar seleccionada. 

Marcos y conjuntos de marcos Aplica automáticamente una sangría a las etiquetas 
FRAME y a las etiquetas anidadas FRAMESET para facilitar la lectura de los archivos 
de conjuntos de marcos. Para que funcione esta opción, la opción Sangría debe 
estar seleccionada. 

Tamaño de sangría Determina el tamaño de las sangrías en espacios, si Usar se ha 
configurado con espacios, o en tabuladores, si Usar se ha configurado con 
tabuladores. Por ejemplo, si Usar se ha configurado con tabuladores y el Tamaño 
de sangría se ha configurado con el valor 4, se aplicará una sangría de 4 
tabuladores a las etiquetas. 

Tamaño de tabulación Determina el tamaño de los tabuladores (medido en 
espacios de caracteres). 

Nota: Si el Tamaño de sangría no es un múltiplo del Tamaño de tabulación y Usar se ha 
configurado con tabuladores, la sangría aplicada a las etiquetas empleará una combinación 
de tabuladores y caracteres de espacio. 

Ajuste automático Ajusta las líneas (con un retorno de carro duro) cuando éstas 
alcanzan el ancho de columna especificado. (Tenga en cuenta que Dreamweaver 
inserta retornos de carro duros en lugares en los que no se modifica el aspecto del 
documento en los exploradores, por lo que es posible que algunas líneas continúen 
siendo más largas de lo especificado en la opción Ajuste automático.) Por el 
contrario, la casilla Ajuste del inspector de código Fuente HTML agrega un 
retorno de carro blando para aquellas líneas que superan el ancho de la ventana. 

Saltos de línea Especifica el tipo de servidor remoto (Windows, Macintosh o 
UNIX) en el que está contenido el sitio remoto. La elección del tipo correcto de 
caracteres para salto de línea garantiza que el código fuente HTML aparezca de 
forma correcta en el servidor remoto. (Tenga en cuenta que, para FTP, este 
parámetro sólo afecta al modo de transferencia binaria; el modo de transferencia 
ASCII de Dreamweaver prescinde de este parámetro. Si descarga archivos 
mediante el modo ASCII, Dreamweaver establecerá los saltos de línea basándose 
en el sistema operativo de su ordenador; si transfiere archivos utilizando el modo 
ASCII, todos los saltos de línea se configurarán como CR LF.) Este parámetro 
también resulta útil si trabaja con un editor de texto externo que sólo reconoce 
determinados tipos de saltos de línea. Por ejemplo, utilice CR LF (Windows) si su 
editor externo es el Bloc de notas y CR (Macintosh) si su editor externo es 
SimpleText. 
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May/min etiquetas y May/min atributos Establecen si los nombres de etiquetas y 
atributos deben aparecer en mayúsculas o en minúsculas. Estas opciones afectan a 
las etiquetas y los atributos que inserte o edite en la ventana de documento, pero 
no a las etiquetas y los atributos que introduzca directamente en el inspector de 
código Fuente HTML ni a las etiquetas y los atributos de un documento en el 
momento de abrirlo (a no ser que también seleccione una o las dos opciones de 
Anular may/min de). 

Anular may/min de: Etiquetas y Atributos Especifican si deben aplicarse las 
opciones de mayúsculas/minúsculas en todo momento, incluso cuando se abre un 
documento HTML existente. Cuando seleccione una de estas opciones, todas las 
etiquetas o atributos de los documentos abiertos se convertirán inmediatamente a 
mayúsculas o minúsculas, según el valor especificado, al igual que todas las 
etiquetas o atributos de los documentos que abra a partir de ese momento (y hasta 
que anule de nuevo la selección de esta opción). Las etiquetas o atributos que 
introduzca en el inspector de código Fuente HTML y en Quick Tag Editor 
también se convertirán a mayúsculas o minúsculas, al igual que las etiquetas o los 
atributos que inserte mediante la paleta de objetos. Por ejemplo, si desea que los 
nombres de etiquetas se conviertan siempre a minúsculas, especifique minúsculas 
como valor de May/min etiquetas y seleccione la opción Anular may/min de: 
Etiquetas. Posteriormente, cuando abra un documento que contenga nombres de 
etiquetas en mayúsculas, Dreamweaver los convertirá a minúsculas. 

Centrado Especifica si los elementos deben centrarse utilizando DIV ALIGN="center" 
o CENTER. Ambas etiquetas forman parte de la especificación transitoria de HTML 
4.0, aunque CENTER es compatible con un mayor número de exploradores. 


Configurar preferencias de colores HTML 

Utilice las preferencias de Colores HTML para controlar los colores del fondo, el 
texto y las etiquetas en el inspector de código Fuente HTML. 

Fondo Especifica el color de fondo del inspector de código Fuente HTML. 

Este color sólo aparece cuando se hace clic o se escribe en el inspector de código 
Fuente HTML; cuando el foco no se encuentra en el inspector de código Fuente 
HTML, su fondo es de color gris. 

Texto Especifica el color del texto que aparece entre las etiquetas (por ejemplo, en 
el código <b>un texto</b>, las palabras “un texto” aparecerán en el color de Texto, 
pero no las etiquetas). Para anular el color de Texto para una etiqueta concreta, 
seleccione la opción Incluir contenido. 

Comentarios Especifica el color de las etiquetas de comentarios (<!—>) y de su 
contenido. 

Predet. etiqueta Especifica el color de todas las etiquetas excepto de los 
comentarios. Para anular el color de Predet. etiqueta, defina un color para 
etiquetas concretas. 
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Específico etiqueta Permite anular los valores de color Predet. etiqueta y Texto 

mediante la especificación de colores para etiquetas concretas. 

Para definir un color para una etiqueta específica: 

1 Seleccione una etiqueta del cuadro Específico etiqueta. 

Pulse Mayús mientras hace clic en múltiples etiquetas contiguas o pulse 
Control (Windows) o Comando (Macintosh) mientras hace clic para 
seleccionar varias etiquetas no contiguas. 

2 Haga clic en el botón de opción situado junto a la muestra de color en la parte 
inferior del panel y utilice uno de los siguientes métodos para elegir un nuevo 
valor de color: 

• En el campo de texto situado junto a la muestra de color, introduzca un valor 
hexadecimal. 

• Haga clic en la muestra de color y seleccione un nuevo color de la paleta de 
colores válidos para los exploradores o del selector de colores del sistema. 

3 Para asignar un color al texto situado entre las etiquetas inicial y de cierre, 
seleccione Aplicar color a contenido de etiqueta. 


Limpiar HTML 

Utilice el comando Limpiar HTML para eliminar etiquetas vacías, combinar 

etiquetas FONT anidadas y, en general, mejorar códigos HTML desordenados o 

ilegibles. 

Para limpiar código HTML: 

1 Abra un documento existente y elija Comandos > Limpiar HTML. 

2 En el cuadro de diálogo que aparece dispone de las siguientes opciones: 

• Quitar Etiquetas vacías elimina las etiquetas que carecen de contenido. Por 
ejemplo, <bx/b> y <FONT COLOR="FFOOOO"x/FONT> se consideran etiquetas 
vacías, mientras que no se considera vacía la etiqueta <b> en <b>un texto</b>. 

• Quitar Etiquetas anidadas repetidas elimina todas las repeticiones de una 
etiqueta. Por ejemplo, en el código <b>Esto es lo que <b>realmente</b> quería 
decir</b>, las etiquetas B que rodean a la palabra “realmente” están repetidas y 
se eliminarían. 

• Quitar Comentarios HTML ajenos a Dreamweaver elimina todos los 
comentarios que no hayan sido insertados por Dreamweaver. Por ejemplo, <!— 
begln body text~> se eliminaría, pero no <!— #BeginEditable "doctltle" --> (porque 
se trata de un comentario de Dreamweaver que marca el comienzo de una 
región editable en una plantilla). 
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• Quitar Comentarios HTML de Dreamweaver elimina todos los comentarios 
insertados por Dreamweaver. Por ejemplo, <!-- #Beg¡nEditable "doctitle" --> sería 
eliminado, pero no <!— begin body text— > (porque no es un comentario de 
Dreamweaver). La eliminación de los comentarios de Dreamweaver convierte 
los documentos basados en plantillas en documentos HTML ordinarios y los 
elementos de biblioteca en código HTML normal (es decir, no se pueden 
actualizar cuando cambia la plantilla original o el elemento de biblioteca). 

• Quitar Etiqueta(s) específica(s) elimina las etiquetas especificadas en el campo 
de texto contiguo. Utilice esta opción para eliminar etiquetas personalizadas 
insertadas por otros editores visuales que no desea que aparezcan en el sitio (por 
ejemplo, BLINK). Separe las diversas etiquetas mediante comas (por ejemplo, 
FONT, BLINK). 

• Combinar etiquetas de <font> anidadas cuando sea posible consolida dos o más 
etiquetas FONT cuando éstas controlan el mismo rango de texto. Por ejemplo, 
<FONT SIZE=“7 ,l ><FONT COLOR="#FFOOOO“>big red </FONT></FONT > se 
cambiaría a <FONT SIZE="7" COLOR= n #FFOOOO">b¡g red</FONT>. 

• Mostrar registro al terminar muestra un cuadro de alerta con detalles acerca de 
los cambios realizados en el documento inmediatamente después de concluir la 
limpieza. 

3 Haga clic en Aceptar. 

Dependiendo del tamaño del documento y del número de opciones 
seleccionadas, la operación de limpieza puede tardar varios segundos en 
realizarse. 


Aplicar formato al código fuente HTML en documentos existentes 

Las opciones de formato del código fuente HTML que especifique en las 
preferencias de Formato HTML y en el archivo SourceFormat.txt afectan sólo a 
los documentos nuevos que cree con Dreamweaver a partir de ese momento. Para 
aplicar estas opciones de formato a los documentos HTML existentes, utilice el 
comando Aplicar formato de origen. 

Para aplicar opciones de formato de código fuente HTML a un documento 
existente: 

1 Elija Archivo > Abrir para abrir un archivo HTML existente en la ventana de 
documento. 

2 Elija Comandos > Aplicar formato de origen. 
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Limpiar HTML de Microsoft Word 

En Dreamweaver es posible abrir o importar documentos guardados con 
Microsoft Word como archivos HTML y, seguidamente, utilizar el cuadro de 
diálogo Limpiar HTML de Word para eliminar los códigos HTML sobrantes o 
innecesarios generados por Word. El código que Dreamweaver elimina lo utiliza 
Word principalmente para aplicar formato y mostrar documentos en Word, por lo 
que no es necesario para ver el archivo HTML. Conserve una copia del archivo 
original de Word (.doc) como copia de seguridad, ya que es posible que no pueda 
volver a abrir el documento HTML en Word una vez aplicada la función Limpiar 
HTML de Word. El comando Limpiar HTML de Word se encuentra disponible 
para documentos guardados como archivos HTML por Word 97 o superior. 

Para utilizar la función Limpiar HTML de Word: 

1 En Microsoft Word, guarde el documento como archivo HTML. 

2 Abra el documento HTML en Dreamweaver mediante uno de los siguientes 
métodos: 

• Elija Archivo > Importar > Importar HTML de Word y seleccione el archivo 
que desea abrir. 

Dreamweaver abrirá el archivo y, seguidamente, abrirá automáticamente el 
cuadro de diálogo Limpiar HTML de Word. 

• Elija Archivo > Abrir y seleccione el archivo que desea abrir. 

Se generará automáticamente un archivo de registro de Correcciones de 
HTML. Esto no forma parte de la función Limpiar HTML de Word. Haga clic 
en Continuar para salir del cuadro de diálogo. Seguidamente, en Dreamweaver, 
elija Comandos >Limpiar HTML de Word. 

3 Con cualquiera de estos métodos, puede producirse un pequeño retraso 
mientras Dreamweaver intenta determinar la versión de Word con la que se 
guardó el archivo. Si Dreamweaver no logra determinar de qué versión se trata, 
seleccione la versión correcta del menú emergente. 

4 Elija las opciones de la función Limpiar HTML de Word que desee utilizar. La 
ficha Básicas muestra las siguientes opciones: 

• Eliminar todo el formato específico de Word elimina todos los códigos HTML 
específicos de Word, incluidos los códigos XML de las etiquetas <html>, los 
metadatos y las etiquetas de vínculos de Word situadas en la sección head del 
documento, el formato XML de Word, las etiquetas condicionales y su 
correspondiente contenido y los párrafos y márgenes vacíos de los estilos. Podrá 
seleccionar cada una de estas opciones de forma independiente mediante la 
ficha Detalladas. 
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• Limpiar CSS elimina todos los códigos CSS específicos de Word, incluidos los 
estilos CSS en línea siempre que sea posible (cuando el estilo padre tiene las 
mismas propiedades de estilo), los atributos de estilo que comiencen por “mso”, 
las declaraciones de estilos ajenos a CSS, los atributos de estilo CSS de las tablas 
y todas las definiciones de estilo no utilizadas de la sección head. Esta opción 
puede personalizarse aún más haciendo clic en la ficha Detalladas. 

• Limpiar etiquetas <font> elimina las etiquetas HTML y convierte el texto 
normal predeterminado a HTML de tamaño 2. 

• Reparar etiquetas mal anidadas elimina las etiquetas de formato de fuentes 
insertadas por Word fuera de las etiquetas de párrafo y encabezado (nivel de 
bloque). 

• Definir color de fondo permite introducir un valor hexadecimal para establecer 
el color de fondo del documento. Si no define ningún color de fondo, el 
documento HTML de Word tendrá un fondo gris. El valor hexadecimal 
predeterminado por Dreamweaver es el blanco. 

• Aplicar formato de origen aplica al documento las opciones de formato de 
origen que especifique en las preferencias de Formato HTML y en el perfil de 
formato de origen. 

• Mostrar registro al terminar muestra un cuadro de alerta con detalles acerca de 
los cambios realizados en el documento inmediatamente después de concluir la 
limpieza. 

5 Haga clic en Aceptar. 

Dependiendo del tamaño del documento y del número de opciones 
seleccionadas, la operación de limpieza puede tardar varios segundos en 
realizarse. Las preferencias introducidas se guardan automáticamente como 
configuración predeterminada de Limpiar HTML de Word. 


Corregir código no válido 

Si ve código HTML resaltado en color amarillo brillante en la ventana de 
documento o en el inspector de código Fuente HTML, ello indicará que 
Dreamweaver ha encontrado HTML no válido que no puede mostrar. Con 
frecuencia, estos marcadores HTML no válidos aparecen al comenzar a escribir 
una etiqueta en el inspector de código Fuente HTML y cambiar posteriormente a 
la ventana de documento sin completar la etiqueta. 

Para corregir este problema, haga clic en el marcador amarillo de HTML no válido 
y siga la sugerencia del inspector de propiedades. Consulte también “Roundtrip 
HTML”, en la página 335. 
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Usar editores de HTML externos 


Puede que desee utilizar un editor de texto para editar manualmente grandes 
cantidades de código HTML, JavaScript o VBScript. Puede utilizar cualquier 
editor de texto externo con Dreamweaver, incluido el Bloc de notas (suministrado 
con Windows 95 y NT) o SimpleText (suministrado con Macintosh), BBEdit, 
HomeSite, vi, emacs y TextPad. Consulte “Usar un editor de texto externo con 
Dreamweaver”, en la página 352 y “Usar BBEdit con Dreamweaver (sólo 
Macintosh)”, en la página 353. 


Usar un editor de texto externo con Dreamweaver 

Puede iniciar el editor de texto externo principal de Dreamweaver para editar el 
código fuente HTML del documento actual y seguidamente, regresar a 
Dreamweaver para continuar editando gráficamente. Dreamweaver detecta los 
cambios guardados en el documento externamente y le solicita que vuelva a cargar 
el documento al regresar. 

Si utiliza BBEdit en Macintosh, siga los pasos indicados en “Usar BBEdit con 
Dreamweaver (sólo Macintosh)”, en la página 353 en lugar de los siguientes pasos. 

Para configurar editores externos para los tipos de archivos distintos a los de texto 
y HTML, consulte “Iniciar un editor de medios externo”, en la página 282. 

Para seleccionar un editor de HTML externo: 

1 Elija Edición > Preferencias. 

2 Seleccione Editores externos en la lista Categoría de la izquierda. 

3 (Sólo Macintosh) Para utilizar un editor HTML distinto de BBEdit, anule la 
selección de la opción Activar integración con BBEdit. Para utilizar BBEdit, 
deje seleccionada la opción Activar integración con BBEdit y omita los pasos 
restantes. 

4 Haga clic en el botón Examinar situado junto al cuadro Editor HTML para 
seleccionar un editor de texto. 

5 En la opción Volver a cargar archivos modifi, especifique lo que desea que haga 
Dreamweaver cuando detecte cambios realizados externamente en un 
documento abierto en Dreamweaver. 

6 En la opción Guardar al iniciar, especifique si Dreamweaver debe guardar 
siempre el documento actual antes de iniciar el editor, no guardarlo nunca o 
solicitarle confirmación para guardarlo cada vez que se inicie el editor externo. 

Para iniciar el editor de HTML externo: 

Elija Edición > Iniciar editor externo o haga clic en Editor externo en la esquina 
superior izquierda del inspector de código Fuente HTML. 
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Usar BBEdit con Dreamweaver (sólo Macintosh) 

Cuando la integración con BBEdit esté activada, una vez abierto un documento 
en BBEdit y en Dreamweaver, el documento se actualizará automáticamente con 
los cambios más recientes cada vez que cambie de una aplicación a la otra. 
Además, ambos programas controlan la selección actual; por ejemplo, puede 
realizar una selección en Dreamweaver y, seguidamente, cambiar a BBEdit, donde 
se encontrará seleccionado el mismo elemento. 

Puede desactivar la integración con BBEdit si prefiere trabajar con una versión 
más antigua de BBEdit o con otro editor de texto HTML distinto. Las selecciones 
no coinciden en ambas aplicaciones si está desactivada la integración con BBEdit. 

Para utilizar BBEdit con Dreamweaver: 

1 Lleve a cabo una de estas operaciones: 

• Elija Edición > Iniciar editor externo. 

• Haga clic en Editor externo en la esquina superior izquierda del inspector de 
código Fuente HTML. 

2 Edite el documento en BBEdit. 

3 Haga clic en el botón de Dreamweaver de la paleta de herramientas HTML en 
BBEdit para regresar a Dreamweaver. 

Para desactivar la integración con BBEdit: 

1 Elija Edición > Preferencias. 

2 Seleccione Editores externos en la lista Categoría de la izquierda. 

3 Anule la selección de Activar integración con BBEdit y haga clic en Aceptar. 

Editar archivos de ColdFusion y Active Server en Dreamweaver 

Dreamweaver muestra iconos para identificar los bloques de código de 
ColdFusion Markup Language (CFML) o Active Server Page (ASP) en la ventana 
de documento siempre que ello sea posible. 

Nota: De forma predeterminada, Dreamweaver no reescribe nunca el código HTML 
localizado en los archivos de ColdFusion y Active Server. 

Para editar un bloque de código ASP desde la ventana de documento: 

1 Haga clic en el marcador amarillo de ASP para seleccionarlo. 

2 En el inspector de propiedades, haga clic en el botón Editar. 

3 Edite el código ASP en el cuadro de diálogo que aparece a continuación y luego 
haga clic en Aceptar. 


Editar HTML 353 



Para editar un bloque de código CFML desde la ventana de documento: 

1 Haga clic en el marcador de CFML para seleccionarlo. 

2 En el inspector de propiedades, lleve a cabo una de estas operaciones: 

• Haga clic en el botón Atributos para editar los atributos existentes de la etiqueta 
y sus valores o agregar otros nuevos. 

• Haga clic en el botón Contenido para editar el contenido que aparece entre las 
etiquetas inicial y de cierre de CFML. Si la etiqueta seleccionada es una etiqueta 
vacía (es decir, si carece de su correspondiente etiqueta de cierre), el botón 
Contenido estará desactivado. 

Si no ve ningún marcador ni texto resaltado en un lugar en el que sabe que hay 
código ASP o CFML, asegúrese en primer lugar de que Ver > Elementos invisibles 
está activado. Si dicha opción está seleccionada y los iconos continúan sin 
aparecer, ello indicará que Dreamweaver no puede mostrar el código como CFML 
o ASP. Esto puede ocurrir, por ejemplo, cuando existen códigos condicionales 
insertados en las etiquetas HTML, como en el siguiente código ASP: 

<¡nput type="checkbox" name="month" value=“October" 

<% ¡f month="October" then %>checked<% end if %> 


Para editar código CFML o ASP cuando no aparece ningún marcador ni texto 

resaltado que lo Identifique: 

1 Si puede seleccionar la etiqueta o el objeto que contiene el código, utilice Quick 
Tag Editor para editar el código. Consulte “Editar una etiqueta HTML en la 
ventana de documento”, en la página 338. De lo contrario, siga estos pasos: 

2 En la ventana de documento, coloque el punto de inserción cerca del lugar en 
el que sabe que se encuentra el código CFML o ASP. 

3 Elija Ventana > Fuente HTML para abrir el inspector de código Fuente 
HTML. 

4 Haga clic en la barra de título del inspector de código Fuente HTML para que 
las operaciones que realice con el teclado vayan dirigidas a dicho inspector. 

No haga clic en medio del inspector, ya que alejaría el punto de inserción del 
código CFML o ASP que desea editar. 

5 Edite el código directamente en el inspector de código Fuente HTML. 

6 Pulse FIO para cerrar el inspector de código Fuente HTML y regrese a la 
ventana de documento. 

Para obtener información acerca del procesamiento de código CFML o ASP y la 

visualización del resultado en la ventana de documento, consulte “Personalizar la 

interpretación y la apariencia de etiquetas de terceros”, en la página 404. 
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Insertar secuencias de comandos 


Puede introducir código JavaScript y VBScript en la ventana de documento sin 
necesidad de utilizar el inspector de código Fuente HTML. 

Para ver marcadores de secuencias de comandos en la ventana de documento, elija 
Ver > Elementos invisibles. Consulte también “Configurar preferencias de 
elementos invisibles”, en la página 92. 

Para insertar una secuencia de comandos: 

1 Sitúe el cursor en el lugar en el que desea introducir la secuencia de comandos. 

2 Haga clic en el botón Secuencia de la paleta de objetos o elija Insertar > 
Secuencia. 

3 En el cuadro de diálogo que aparece a continuación, elija el lenguaje de la 
secuencia de comandos del menú emergente. 

Si utiliza JavaScript y no está seguro de la versión, elija JavaScript en lugar de 
JavaScriptl.l o JavaScriptl.2. 

4 Introduzca el código que debe aparecer entre las etiquetas de secuencia de 
comandos. 

Para establecer un vínculo con un archivo de secuencia de comandos externo, 
haga clic en Aceptar sin escribir nada y, seguidamente, agregue la referencia al 
archivo de origen en el inspector de propiedades (escriba el nombre del archivo 
en el cuadro Origen o haga clic en el icono de carpeta para localizar y 
seleccionar el archivo). 

Para editar la secuencia de comandos: 

1 Seleccione el icono Secuencia. 

2 En el inspector de propiedades, haga clic en Editar. 

Configurar propiedades de secuencia de comandos 

Las siguientes propiedades aparecen en el inspector de propiedades cuando hay un 
marcador de secuencia de comandos seleccionado. 

Lenguaje Especifica JavaScript o VBScript como lenguaje de la secuencia de 
comandos. 

Origen Especifica un archivo de secuencia de comandos vinculado de forma 
externa. Escriba la ruta o haga clic en la carpeta para elegir el archivo. 

Editar Abre la ventana Secuencia, en la que podrá realizar cambios en la secuencia 
de comandos. 
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Insertar comentarios 


Un comentario es un texto descriptivo que usted inserta en el código HTML para 
explicar el código o facilitar otra información. Los comentarios no afectan a la 
apariencia del documento en un explorador. Si desea agregar más información 
acerca de cualquier archivo del sitio, también puede utilizar Design Notes. Para 
obtener más información, consulte “Design Notes”, en la página 172. 

Consulte también “Configurar preferencias de elementos invisibles”, en la 
página 92. 

Para insertar un comentario: 

1 Sitúe el punto de inserción en el lugar en el que desea introducir el comentario. 

2 Haga clic en el botón Comentario del panel Invisibles, en la paleta de objetos, o 
elija Insertar > Comentario. 

Para ver marcadores de comentarios en la ventana de documento, elija Ver > 
Elementos invisibles. 

Para introducir el texto del comentario: 

1 Seleccione el icono Comentario. 

2 Introduzca el texto en el inspector de propiedades. 

La creación de un comentario genera el siguiente código HTML: 

<!— Comment text~> 


356 Capítulo 13 



14 



CAPÍTULO 14 

Plantillas y bibliotecas 


Las plantillas y bibliotecas de Dreamweaver pueden ayudarle a crear páginas Web 
con un diseño coherente. El uso de plantillas y bibliotecas también facilita el 
mantenimiento de sitios Web, ya que puede rediseñar un sito y cambiar cientos de 
páginas en cuestión de segundos. 

Una plantilla es un documento que puede utilizarse como base para otros 
documentos. Al crear una plantilla, podrá indicar qué elementos de la página 
deberán permanecer constantes (no editables) y qué elementos podrán 
modificarse. Por ejemplo, si desea publicar una revista en línea, la cabecera 
probablemente nunca cambie, pero sí cambiará el título y el contenido con cada 
nuevo número. Para indicar el estilo y la ubicación del artículo central, puede 
utilizar texto marcador de posición y definirlo como región editable. Para agregar 
nuevos artículos, el redactor sólo tendrá que seleccionar el texto marcador de 
posición y escribir el artículo sobre él. 

Puede modificar una plantilla incluso después de usarla para crear documentos. 
Posteriormente, al actualizar documentos que usen una plantilla, las secciones 
bloqueadas (no editables) de los documentos se actualizarán con los cambios 
efectuados en la plantilla. 
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Dreamweaver también proporciona dos formas de manipular texto repetido para 
que no tenga que cambiarlo en cada una de las páginas del sitio: los elementos de 
biblioteca y los server-side ineludes. Puede utilizar estos medios para manipular el 
contenido que aparece en todas las páginas del sitio (como el encabezado o el pie 
de página) o para el contenido que aparece sólo en unas pocas páginas pero que 
debe actualizarse con frecuencia (como los titulares de noticias o las ofertas 
especiales de productos). Estos medios resultan indicados para diversos tipos de 
sitios: 

• Los elementos de biblioteca pueden utilizarse con garantías en todos los tipos 
de sitios y deberán utilizarse siempre para los sitios que se vayan a ver de forma 
local. Consulte “Elementos de biblioteca”, en la página 370. 

• Los server-side ineludes sólo pueden utilizarse para sitios que vayan a verse 
desde servidores; además, los servidores deben estar configurados para procesar 
server-side ineludes, (pregunte al webmaster o al administrador del sistema si su 
servidor Web es compatible con server-side ineludes.) Consulte “Usar server- 
side ineludes”, en la página 378. 


Configurar preferencias de resaltado 

En las plantillas y en los archivos basados en plantillas, las regiones editables y las 
regiones bloqueadas están resaltadas con colores diferentes. Las preferencias de 
resaltado permiten personalizar los colores empleados para identificar las regiones 
de la plantilla y los elementos de biblioteca en la ventana de documento. Para 
obtener más información, consulte las siguientes secciones: 

• Para personalizar los colores de resaltado de la plantilla, consulte “Configurar 
preferencias de plantilla”, en la página 361. 

• Para especificar el color de resaltado de los elementos de biblioteca, consulte 
“Configurar preferencias de biblioteca”, en la página 372. 

• También puede especificar un color de resaltado para un contenido que incluya 
etiquetas de terceros. Consulte “Cómo deben aparecer las etiquetas 
personalizadas en la ventana de documento”, en la página 408. 
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Crear plantillas 

Puede crear una plantilla a partir de un documento HTML existente y después 
modificarla para que se ajuste a sus necesidades, o bien puede crear una plantilla 
comenzando de cero a partir de un documento HTML en blanco. 

Las plantillas se almacenan automáticamente en la carpeta Templates de la carpeta 
raíz local del sitio. Si no existe esta carpeta todavía, Dreamweaver la creará al 
guardar una nueva plantilla. 

Para guardar un documento existente como plantilla: 

1 Elija Archivo > Abrir y seleccione un documento. 

2 Elija Archivo > Guardar como plantilla. 

3 En el cuadro de diálogo que aparece a continuación, seleccione un sitio e 
introduzca un nombre para la plantilla en el cuadro Guardar como. 

4 Haga clic en Guardar. 

Para crear una plantilla nueva en blanco: 

1 Elija Ventana > Plantillas. 

2 En la paleta de plantillas, lleve a cabo una de estas operaciones: 

• Haga clic en el botón de menú contextual y seleccione Nueva plantilla. 

• Haga clic en el icono Nueva plantilla, situado en la parte inferior derecha de la 
paleta de plantillas. 

• En la lista de la paleta de plantillas, haga clic con el botón derecho del ratón 
(Windows) o haga clic mientras pulsa la tecla Control (Macintosh) y, en el 
menú contextual, seleccione Nueva plantilla. 

Se agregará una nueva plantilla sin título a la lista de plantillas de la paleta. 

3 Con la plantilla aún seleccionada, introduzca un nombre para ella. 

Para editar una plantilla: 

1 Elija Ventana > Plantillas. 

2 En la paleta de plantillas, haga doble clic en el nombre de la plantilla. 

3 Edite la plantilla en la ventana de documento. 

Si desea almacenar información adicional sobre una plantilla, puede crear un 
archivo de Design Notes (notas de diseño) para la plantilla en cuestión. Los 
documentos basados en una plantilla no heredan las Design Notes de la plantilla. 
(Para obtener más información sobre Design Notes, consulte “Design Notes”, en 
la página 172.) 
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Configurar propiedades de página de plantilla 

Los documentos creados a partir de una plantilla heredan las propiedades de 
página de la plantilla, salvo el título de la página. Si un documento utiliza una 
plantilla, podrá cambiar el título del documento, pero se ignorarán los cambios 
que realice en las demás propiedades de página. 

Las propiedades de página de una plantilla se definen utilizando el comando 
Modificar > Propiedades de la página. Si necesita cambiar las propiedades de 
página de un documento después de haberle aplicado una plantilla, deberá 
modificar las propiedades de página de la plantilla y, seguidamente, actualizar las 
páginas que utilizan la plantilla. Consulte “Modificar plantillas y actualizar el 
sitio”, en la página 367. 

Para definir las propiedades de página de la plantilla: 

1 Abra la plantilla y elija Modificar > Propiedades de la página. 

2 Especifique las opciones deseadas para la página y haga clic en Aceptar. 

Para conocer más detalles sobre las propiedades de página, consulte Propiedades 
de página en la Ayuda de Dreamweaver 


Definir las regiones editables de una plantilla 

En una plantilla, las regiones editables son las partes de la página que cambian 
(por ejemplo, un artículo de un boletín informativo). Las regiones bloqueadas (no 
editables) son áreas que permanecen constantes de una página a otra, como la 
cabecera o el logotipo de la empresa. 

De forma predeterminada, todas las regiones de una plantilla están marcadas 
como bloqueadas al guardarla; para que una plantilla resulte útil, deberá hacer que 
algunas partes sean editables. 

Al editar la plantilla en sí, podrá realizar cambios tanto en las regiones editables 
como en las bloqueadas. Sin embargo, cuando aplique la plantilla a un 
documento, sólo podrá realizar cambios en las regiones editables del documento; 
no podrá modificar las regiones bloqueadas del documento. 

Nota: Al asignar un nombre a una región, no podrá utilizar los siguientes caracteres: 
comillas simples y dobles (' "), paréntesis angulares (< >) y ampersands (&). 
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Para definir el contenido existente de la plantilla como región editable: 

1 En la plantilla, seleccione el texto o el contenido que desee convertir en editable. 

2 Elija Modificar > Plantillas > Marcar selección como editable. 

3 En el cuadro de diálogo Nueva región editable, introduzca un nombre para la 
región. 

La región editable se resaltará en la plantilla. 

Puede marcar una tabla entera o una celda individual de una tabla como 
editable; no obstante, no podrá marcar varias celdas a la vez. Las capas y el 
contenido de las capas son elementos independientes; al convertir una capa en 
editable, podrá cambiar la posición de la capa; al convertir el contenido de una 
capa en editable, podrá cambiar dicho contenido. 

Para definir una nueva reglón editable en una plantilla: 

1 En la plantilla, coloque el punto de inserción en la posición en la que desea 
insertar la región editable. 

2 Elija Modificar > Plantillas > Nueva región editable. 

3 En el cuadro de diálogo Nueva región editable, introduzca un nombre para la 
región. 

El nombre de la región, encerrado entre llaves ({}), se inserta en la plantilla 
como un marcador de posición resaltado. 

Al aplicar la plantilla a un documento, podrá sustituir el marcador de posición 
por texto, imágenes u otro tipo de contenido. 

Configurar preferencias de plantilla 

Puede utilizar las preferencias de resaltado de Dreamweaver para personalizar el 
color de resaltado para las regiones editables y bloqueadas de una plantilla. El 
color de región editable aparece en la propia plantilla; el color de región bloqueada 
aparece en el documento que utiliza la plantilla. Puede utilizar estos colores para 
que le ayuden a recordar a usted o a quien utilice las plantillas las regiones del 
documento que no se pueden editar. 

Para cambiar el color de resaltado de la plantilla: 

1 Elija Edición > Preferencias y seleccione Resalto. 

2 Haga clic en el cuadro de color de Regiones editables y seleccione un color de 
resaltado. Repita esta operación para las Regiones bloqueadas. 

3 Haga clic en Mostrar para alternar la visualización de estos colores en la ventana 
de documento. 

4 Haga clic en Aceptar. 
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Es posible 
modificar tanto 
las regiones 
bloqueadas 
como las 
editables. 


Para ver los colores de resaltado en la ventana de documento: 

Elija Ver > Elementos invisibles. 

Los colores de resaltado sólo aparecen en la ventana de documento cuando está 
activado Ver > Elementos invisibles. 


Ver regiones editables y bloqueadas 

Las regiones editables y bloqueadas aparecen en la ventana de documento como 
texto y objetos resaltados. (Para obtener información sobre la configuración de las 
preferencias de resaltado, consulte “Configurar preferencias de plantilla”, en la 
página 361.) 

En las plantillas sólo se resaltan las regiones editables. No obstante, puede cambiar 
tanto el contenido editable como el bloqueado. 


; <<Plantilla»> (scaal*) - Dreamweaver 


Archivo Edición Ver insertar Modificar Texto Comandos Sitio Ventana Ayuda 


Locked Región 

Contains material that doesn't change. 


Use templates to create a standard design for a page and apply that design to several documents in 
your site. Templates make it easy to quickly create several pages that share a theme. 


Editable Región 
Contains material that 


{Edit-Region-Placeholder} 

Editable regions are highlighted in templates. 

Locked regions are highlighted in documents that use templates. 

The associated HTML source code for editable and locked regions is highlighted 
inspector. 


Las regiones editables 
están resaltadas. 
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Las regiones 
bloqueadas están 
resaltadas. 

Sólo es posible 
modificar las 
reglones editables. 


Sólo las regiones bloqueadas aparecen resaltadas en los documentos que utilizan 
plantillas. Sólo podrá realizar cambios en el contenido editable (no resaltado). 



Ver HTML editable y bloqueado 

El contenido editable se delimita en HTML mediante los comentarios de 
Dreamweaver #BeglnEdltable y #EndEdltable. El código fuente HTML para un 
marcador de posición editable denominado Edlt-Reglon tendría la siguiente 
apariencia: 

<I— #BeglnEditable "Edlt-Reglon" — > 

{Edltable-Reglon} 

<1— #End Edita ble --> 

El código HTML para una tabla editable denominada Edlt-Table tendría la 
siguiente apariencia: 

<!— #BeglnEditable "Edlt-Table" --> 

<table wldth = "77%“ border="1"> 

<tr> 

<td>&nbsp;</td> 

<td>&nbsp;</td> 

</tr> 

</table> 

<!— #End Edita ble --> 
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Las regiones editables de las plantillas se muestran resaltadas en la ventana HTML. 
No obstante, puede cambiar tanto el código fuente HTML editable como el 
bloqueado. 



El código HTML 
editable está 
resaltado. 


Es posible modificar 
tanto las regiones 
editables como las 
bloqueadas. 


Las regiones bloqueadas de los documentos que usan plantillas se muestran 
resaltadas en el inspector de código Fuente HTML. Sólo podrá realizar cambios 
en el código fuente HTML editable (no resaltado). 


El código HTML 
bloqueado está 
resaltado. 


Sólo es posible 
modificar el 
código HTML 
editable. 
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Quitar la marca de una región 

Si marca una región como editable y después desea bloquearla de nuevo 
(convertirla en no editable), utilice el comando Quitar la marca de región editable. 

Para quitar la marca de una región (convertirla en no editable): 

1 Elija Modificar > Plantillas > Quitar la marca de región editable. 

2 Seleccione el nombre de la región de la lista y haga clic en Aceptar. 

La región quedará bloqueada. 

Usar estilos, líneas de tiempo y comportamientos en plantillas 

Las plantillas admiten plenamente los estilos, las líneas de tiempo y los 
comportamientos personalizados. Para utilizar estilos, líneas de tiempo o 
comportamientos en una plantilla, éstos deben definirse en una región editable del 
documento que utilice la plantilla. 

Para obtener más información, consulte “Aplicar formato al texto con hojas de 
estilos CSS”, en la página 188, “Líneas de tiempo”, en la página 253 y “Usar 
comportamientos”, en la página 297. 


Usar la paleta de plantillas 

Use la paleta de plantillas para crear nuevas plantillas y administrar las plantillas 
existentes. 

Para abrir la paleta de plantillas: 

Elija Ventana > Plantillas. 

En el panel superior de la paleta de plantillas se enumeran todas las plantillas 
disponibles para un sitio local. El panel inferior muestra el contenido de la 
plantilla seleccionada. 

Para editar una plantilla: 

Seleccione una plantilla de la lista y haga clic en Abrir o haga doble clic en el 
nombre de la plantilla en la lista. 

Para cambiar el nombre de una plantilla: 

Haga clic una vez en el nombre de la plantilla para seleccionarla y, seguidamente, 
haga clic de nuevo. Cuando el nombre se convierta en un campo editable, escriba 
el nuevo nombre. 
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Al cambiar el nombre de una plantilla, las referencias a dicha plantilla no se 
actualizan automáticamente. Deberá aplicar de nuevo la plantilla cuyo nombre ha 
cambiado a todos los documentos que hacen referencia a ella. Consulte “Crear 
documentos basados en plantillas”, en la página 366. 


Crear documentos basados en plantillas 

Puede usar una plantilla como punto de partida para la creación de un nuevo 
documento o aplicarla a un documento existente. 

Para crear un nuevo documento basado en una plantilla, lleve a cabo una de las 
siguientes operaciones: 

• Elija Archivo > Nuevo desde plantilla. En el cuadro de diálogo que aparece a 
continuación, seleccione una plantilla y haga clic en Seleccionar. 

• Elija Archivo > Nuevo para crear un documento nuevo y, seguidamente, 
aplíquele una plantilla arrastrándola desde la paleta de plantillas. 

Para aplicar una plantilla a un documento existente de Dreamweaver: 

Abra el documento. Luego lleve a cabo una de estas operaciones: 

• Elija Modificar > Plantillas > Aplicar plantilla a página. Elija una plantilla de la 
lista y haga clic en Seleccionar. 

• Arrastre la plantilla de la paleta de plantillas a la ventana de documento. 

• Seleccione la plantilla en la paleta de plantillas y haga clic en Aplicar a página. 

Al aplicar una plantilla a un documento existente, el contenido de la plantilla se 
agregará al documento. 

Si un documento ya tiene aplicada una plantilla. Dreamweaver compara los 
nombres de las regiones editables de dos plantillas e inserta el contenido de la 
nueva plantilla en los nombres de regiones que coincidan en la plantilla antigua. 

Si alguna de las regiones editables no coincide en las dos plantillas, o si una región 
editable en la anterior plantilla no cuenta con su correspondiente región en la 
nueva plantilla, aparecerá un cuadro de diálogo en el que se le pedirá confirmación 
para eliminar las regiones sobrantes o transferirlas a la nueva plantilla. Si hay más 
regiones editables en la nueva plantilla que en la antigua, las regiones adicionales 
aparecerán en los documentos como marcadores de posición. 
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Localizar las regiones editables de un documento 

Todas las regiones editables del cuerpo de una plantilla se enumeran en la parte 
inferior del submenú Modificar > Plantillas. Use esta lista para seleccionar y editar 
las regiones. 

Para localizar una región editable y seleccionarla en el documento: 

Seleccione Modificar > Plantillas y elija el nombre de la región de la lista. 

La región se seleccionará en el documento. Comience a escribir para sustituir el 
contenido de la región. 


Separar un documento de una plantilla 

Para realizar cambios tanto en las regiones bloqueadas como en las regiones 
editables de una página que usa una plantilla, en primer lugar deberá separar la 
página de la plantilla. Una vez separada la página, podrá editarla como si no se le 
hubiera aplicado ninguna plantilla. No obstante, la página ya no se actualizará 
cuando se actualice la plantilla. 

Para separar un documento de una plantilla: 

1 Abra el documento que desea separar. 

2 Elija Modificar > Plantillas > Separar de plantilla. 

La página se separará de la plantilla y todas las regiones se convertirán en editables. 


Modificar plantillas y actualizar el sitio 

Al realizar un cambio en una plantilla, Dreamweaver le pedirá que actualice las páginas 
que utilizan la plantilla. También puede usar los comandos de actualización para 
actualizar manualmente la página actual o el sitio completo. Aplicar los comandos de 
actualización es lo mismo que volver a aplicar una plantilla. 

Para abrir la plantilla usada para crear el documento actual: 

Elija Modificar > Plantillas > Abrir plantilla adjunta. 

Seguidamente, modifique el contenido de la plantilla de la forma que considere 
oportuna. Para modificar las propiedades de página de la plantilla, elija Modificar 
> Propiedades de la página. (Los documentos creados a partir de una plantilla 
heredan las propiedades de página de la plantilla, salvo el título de la página.) 

Para actualizar el documento actual con la versión más reciente de una plantilla: 

Elija Modificar > Plantillas > Actualizar página actual. 
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Para actualizar el sitio completo o todos los documentos que usen una plantilla 
concreta: 

1 Elija Modificar > Plantillas > Actualizar páginas. 

Aparecerá el cuadro de diálogo Actualizar páginas. 

2 En el menú emergente Buscar en, lleve a cabo una de las operaciones siguientes: 

• Seleccione Todo el sitio y elija el nombre del sitio. Se actualizarán todas las 
páginas del sitio seleccionado con los cambios de sus correspondientes 
plantillas. 

• Seleccione Archivos que usan y elija el nombre de la plantilla. Se actualizarán 
todas las páginas del sitio actual que usen la plantilla seleccionada. 

3 Asegúrese de que Plantillas está seleccionado en la opción Actualizar. 

4 Haga clic en Iniciar. 

Importar y exportar contenido XML 

Si utiliza XML en sus páginas Web, utilice las funciones de importación y 
exportación de XML para manipular contenido XML. Puede exportar regiones 
editables de un documento que utilice una plantilla para poder manipular su 
contenido fuera de Dreamweaver, o bien puede combinar el contenido de un 
documento XML con una plantilla existente de Dreamweaver. 

Para exportar las regiones editables de un documento como XML: 

1 Elija Archivo > Abrir y abra un documento que use una plantilla (y que tenga 
regiones editables). 

2 Elija Archivo > Exportar > Exportar regiones editables como XML. 

3 En el cuadro de diálogo XML que aparece a continuación, seleccione una 
notación de etiqueta y haga clic en Aceptar. 

Consulte “Usar notaciones de etiquetas XML”, en la página 370. 

4 En el cuadro de diálogo que aparece, asigne un nombre al archivo XML y haga 
clic en Guardar. 

Al exportar el documento, el archivo XML generado contiene el nombre de la 
plantilla que usa el documento y todos los nombres de las regiones editables. 
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Para importar contenido XML: 

1 Elija Archivo > Importar XML a plantilla. 

2 Seleccione el archivo XML y haga clic en Abrir. 

Al importar un archivo XML, Dreamweaver combina el contenido XML con la 
plantilla especificada en el archivo XML y muestra el resultado en una nueva 
ventana de documento. Si no se encuentra la plantilla especificada, 
Dreamweaver le pedirá que seleccione la plantilla que desea usar. 

XML 

XML son las siglas de Extensible Markup Language (lenguaje de formato 
ampliable), un lenguaje de formato para documentos estructurados. XML deriva 
de SGML, siglas de Standard Generalized Markup Language (lenguaje de formato 
generalizado estándar); al igual que SGML, XML es un lenguaje para etiquetas 
definidas y las relaciones establecidas entre éstas. Se trata de una generalización de 
HTML que le permite definir sus propias etiquetas. 

Las etiquetas XML son semejantes a las etiquetas HTML: constan de un nombre 
de etiqueta y de atributos opcionales encerrados entre paréntesis angulares. Al 
igual que ocurre con HTML, se utiliza una etiqueta inicial y una etiqueta de cierre 
(en la que el nombre de la etiqueta va precedido de una barra invertida) para 
marcar el contenido de las etiquetas. Una diferencia sintáctica consiste en que, en 
XML, una etiqueta vacía (aquélla que carece de contenido, como <¡mg>) debe 
terminar con una barra invertida justo antes del paréntesis angular de cierre. Por 
ejemplo, una etiqueta <¡mg> en XML podría tener este aspecto: 

<img src="test.png" /> 

Para obtener más información sobre XML, consulte “Recursos técnicos HTML y 
Web”, en la página 19. 


Plantillas y bibliotecas 369 



Usar notaciones de etiquetas XML 

Dreamweaver permite exportar contenido XML mediante dos notaciones de 
etiquetas distintas: etiquetas de nombres de regiones editables o etiquetas XML 
estándar de Dreamweaver. La notación que use dependerá de cómo se haya 
incorporado el contenido XML a su sitio Web. 

El siguiente código XML se exportó desde un documento basado en una plantilla 
denominada newstemplate. El documento incluye una región editable denominada 
Edit-Region. 

• Nombres reg. editables como etiquetas XML hace que se usen los nombres de 
las regiones editables como etiquetas XML. En este ejemplo, la etiqueta doctitle 
identifica el título de la plantilla y Edit-Region identifica la región editable. 

<doctitle> 

< ![CDATA[<title>newstemplate</title>]]> 

</doctitle> 

<Edit-Region> 

<! [CDATA[{ Edit-Region}]] > 

</Edit-Region> 

• La opción Etiquetas XML estándar Dreamweaver usa la etiqueta Ítem ñame. En 
este ejemplo, 

Ítem name="doct¡tle" y Ítem name="Edit-Region“ se utilizan para identificar el título 
de la plantilla y la región editable. 

citem name="doctitle"> 

<![CDATA[ <títle>newstemplate</title>]]> 

</¡tem> 

citem name="Edit-Region"> 

<![CDATA[{Edit-Region}]]x/item> 

</¡tem> 


Elementos de biblioteca 

Las bibliotecas contienen aquellos elementos de página tales como imágenes, texto 
y otros objetos que usted reutiliza o actualiza con frecuencia en el sitio Web. 
Dichos elementos se denominan elementos de biblioteca. 

Al colocar un elemento de biblioteca en un documento, Dreamweaver inserta una 
copia del código fuente HTML en el archivo y crea una referencia al elemento 
externo original. La referencia al elemento de biblioteca externo posibilita la 
actualización del contenido de todo el sitio de una sola vez cambiando el elemento 
de biblioteca y, seguidamente, utilizando los comandos de actualización del 
submenú Modificar > Biblioteca. 

Dreamweaver almacena los elementos de biblioteca en una carpeta llamada 
Library dentro de la carpeta raíz local del sitio en cuestión. Puede definir una 
biblioteca distinta para cada sitio. Para obtener más información sobre la carpeta 
raíz local de cada sitio, consulte “Crear un sitio local”, en la página 78. 
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Crear un elemento de biblioteca 

Para crear un elemento de biblioteca, deberá seleccionar un fragmento de la 
sección BODY de un documento para que Dreamweaver convierta el área 
seleccionada en un elemento de biblioteca. 

Los elementos de biblioteca pueden incluir cualquier elemento BODY, incluido 
texto, tablas, formularios, imágenes, applets de Java, plug-ins y elementos ActiveX. 
Dreamweaver almacena sólo una referencia a elementos vinculados, como las 
imágenes, por ejemplo. El archivo original debe permanecer en la ubicación 
especificada para que el elemento de biblioteca funcione correctamente. 

Los elementos de biblioteca también pueden contener comportamientos, pero 
existen requisitos especiales para la edición de comportamientos en elementos de 
biblioteca; consulte “Editar un comportamiento en un elemento de biblioteca”, en 
la página 375. Los elementos de biblioteca no pueden contener líneas de tiempo 
ni hojas de estilos, ya que el código de dichos elementos forma parte de la sección 
HEAD . 

Para crear un elemento de biblioteca: 

1 Seleccione una parte de un documento para guardarla como elemento de 
biblioteca. 

2 Lleve a cabo una de estas operaciones: 

• Elija Ventana > Biblioteca y arrastre la selección hasta la paleta de bibliotecas. 

• En la paleta de bibliotecas, haga clic en el botón de menú contextual y 
seleccione Crear elemento de biblioteca. 

• Haga clic en el icono Nuevo elemento de biblioteca, situado en la parte inferior 
derecha de la paleta de bibliotecas. 

• Elija Modificar > Biblioteca > Agregar objeto a Biblioteca. 

3 Introduzca un nombre para el nuevo elemento de biblioteca. 
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Configurar preferencias de biblioteca 

Puede personalizar el color de resaltado de los elementos de biblioteca y mostrar u 
ocultar el color de resaltado en las preferencias de Resalto. 

Para cambiar el color de resaltado de los elementos de biblioteca: 

1 Elija Edición > Preferencias y seleccione Resalto. 

2 Haga clic en el cuadro de color para seleccionar un color para los elementos de 
biblioteca. 

3 Seleccione Mostrar para activar y desactivar la visualización del color de 
resaltado de biblioteca. 

Ver > Elementos invisibles también debe estar activado para que el color de 
resaltado de biblioteca sea visible en la ventana de documento. 

4 Haga clic en Aceptar para cerrar el cuadro de diálogo Preferencias. 

Agregar un elemento de biblioteca a una página 

Cuando agregue un elemento de biblioteca a una página, se insertará en el 
documento el contenido real junto con una referencia al elemento original. Una 
vez insertado el contenido, no es preciso que esté presente el elemento original 
para que se muestre el contenido. 

Para agregar un elemento de biblioteca: 

1 Sitúe el punto de inserción en la ventana de documento. 

2 Elija Ventana > Biblioteca o haga clic en el botón Biblioteca del lanzador. 

3 Arrastre un elemento desde la paleta de bibliotecas a la ventana de documento o 
seleccione un elemento y haga clic en Insertar. 

Para insertar el contenido de un elemento sin crear una copia del elemento en el 
documento, pulse Control (Windows) u Opción (Macintosh) mientras arrastra 
el elemento hacia el exterior de la paleta de bibliotecas. 
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Realizar cambios en un elemento de biblioteca 


Al editar un elemento de biblioteca, se modifica el archivo original del elemento. 
Dreamweaver permite actualizar el elemento editado en todos los documentos del 
sitio actual, cambiar el nombre de los elementos para romper su conexión con 
documentos o plantillas y eliminar elementos de una biblioteca. 

Nota: La paleta de estilos CSS, el inspector de líneas de tiempo y el inspector de 
comportamientos no se encuentran disponibles al editar elementos de biblioteca, ya que éstos 
últimos sólo pueden contener elementos de la sección BODY. El código de las líneas de tiempo 
y de las hojas de estilos CSS forma parte de la sección HEAD, mientras que el inspector de 
comportamientos no se encuentra disponible porque inserta código en la sección HEAD 
además de en la sección BODY. Para obtener instrucciones para editar comportamientos, 
consulte "Editar un comportamiento en un elemento de biblioteca", en la página 375. 

Para editar un elemento de biblioteca: 

1 Elija Ventana > Biblioteca o haga clic en Biblioteca en el lanzador. 

2 Seleccione un elemento de biblioteca y haga clic en el icono Abrir (el icono de 
carpeta) situado en la parte inferior de la paleta, o haga doble clic en el elemento. 

Dreamweaver abrirá una nueva ventana para que edite el elemento de biblioteca. 

3 Edite el elemento de biblioteca y guarde los cambios. 

4 En el cuadro de diálogo que aparece a continuación, determine si deben actualizarse 
los documentos en el sitio local con el elemento de biblioteca editado. 

• Elija Actualizar para actualizar todos los documentos del sitio local con el 
elemento de biblioteca editado. 

• Elija No actualizar para impedir que se modifiquen los documentos hasta que 
utilice Modificar > Biblioteca > Actualizar página actual o Actualizar páginas. 

Para actualizar las páginas que utilicen el elemento de biblioteca editado: 

1 Elija Modificar > Biblioteca > Actualizar páginas. 

2 En el cuadro de diálogo que aparece a continuación, seleccione los archivos que 
desea actualizar. 

• Seleccione Todo el sitio para actualizar todos los documentos del sitio 
especificado. 

• Elija Arch. que usan para actualizar todos los documentos que utilicen el 
elemento de biblioteca especificado. 

3 Haga clic en Iniciar. 

El contenido del elemento de biblioteca se sustituye en los documentos 
especificados. 
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Para cambiar el nombre de un elemento de biblioteca: 

1 Seleccione un elemento de biblioteca en la paleta de bibliotecas. 

2 Haga clic dentro del nombre del elemento. 

3 Introduzca un nuevo nombre. 

4 Cuando haga clic en Aceptar, Dreamweaver le preguntará si desea actualizar los 
archivos que utilizan el elemento. 

• Si hace clic en Sí, todos los documentos que utilizaban previamente el elemento 
actualizarán sus referencias al nuevo nombre. 

• Si hace clic en No, los documentos que incluyan referencias al elemento con un 
nombre antiguo no actualizarán automáticamente sus referencias con el nuevo 
nombre. 

Para eliminar un elemento de una biblioteca: 

1 Elija Ventana > Biblioteca o haga clic en el botón Biblioteca del lanzador. 

2 Seleccione un elemento de la paleta de bibliotecas. 

3 Haga clic en el icono de papelera o pulse Suprimir. 

La eliminación de un elemento de biblioteca borra el elemento de la biblioteca, 

pero no cambia el contenido de ningún documento. 


Convertir elementos de biblioteca en editables en un documento 

Si ha agregado un elemento de biblioteca al documento y desea editar el elemento 
concretamente para dicha página, deberá romper el vínculo existente entre el 
elemento del documento y la biblioteca. Una vez convertida una copia del 
elemento de biblioteca en editable, dicha copia no podrá ser actualizada desde 
la biblioteca. 

Para convertir un elemento de biblioteca en editable: 

1 Seleccione un elemento de biblioteca en el documento actual. 

2 Luego lleve a cabo una de estas operaciones: 

• Haga clic en Separar del original en el inspector de propiedades 

• Elija Separar del original en el menú contextual. 
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Editar un comportamiento en un elemento de biblioteca 

Cuando cree elementos de biblioteca que contengan elementos con 
comportamientos adjuntos, Dreamweaver copiará el elemento y su manejador de 
evento (el atributo que especifica qué evento debe buscarse y qué acción debe 
ejecutarse cuando tenga lugar el evento) al archivo del elemento de biblioteca. 
Dreamweaver no copia las funciones JavaScript asociadas en el elemento de 
biblioteca. Por el contrario, Dreamweaver inserta automáticamente las funciones 
en la sección HEAD del documento actual (si es que no están ya presentes) al 
agregar el elemento de biblioteca al documento. 

Las funciones JavaScript no se almacenan con el elemento de biblioteca porque 
son elementos de la sección HEAD y los elementos de biblioteca sólo pueden 
contener elementos de la sección BODY. Por consiguiente, el inspector de 
comportamientos no se encontrará disponible al editar elementos de biblioteca, ya 
que sólo la mitad del código del comportamiento podrá ser inspeccionado. Para 
editar un comportamiento en un elemento de biblioteca, en primer lugar deberá 
convertir el elemento en editable y, seguidamente, volver a crearlo después de 
realizar cambios. 

Para editar un comportamiento en un elemento de biblioteca: 

1 Abra un documento que contenga el elemento de biblioteca. 

Anote el nombre del elemento de biblioteca, así como las etiquetas exactas que 
contiene. Necesitará esta información en los pasos 8 y 9. 

2 Seleccione el elemento de biblioteca y haga clic en Separar del original en el 
inspector de propiedades. 

3 Seleccione el elemento que tiene el comportamiento adjunto a él. 

4 Elija Ventana > Comportamientos para abrir el inspector de comportamientos 
y haga doble clic en la acción que desea cambiar. 

5 En el cuadro de diálogo que aparece, realice los cambios necesarios y haga clic 
en Aceptar. 

6 Elija Ventana > Biblioteca para abrir la paleta de bibliotecas. 

7 Elimine el elemento de biblioteca original. 

8 En la ventana de documento, seleccione el elemento que representa al elemento 
de biblioteca. 

Tenga cuidado de seleccionar exactamente los mismos elementos que había en 
el elemento de biblioteca original. 
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9 En la paleta de bibliotecas, utilice el menú contextual para seleccionar Crear 
elemento de biblioteca y asigne al nuevo elemento el mismo nombre que el del 
que borró en el paso 7. 

Asegúrese de que utiliza exactamente el mismo texto (incluidas la mayúsculas y 
minúsculas). 

10 Para actualizar el elemento de biblioteca en las páginas del sitio, lleve a cabo una 
de estas operaciones: 

• Elija Modificar > Biblioteca > Actualizar páginas. 

• Utilice el menú contextual y seleccione Actualizar páginas. 

11 En el menú emergente Buscar en del cuadro de diálogo Actualizar páginas, 
seleccione Arch. que usan. 

Deberá aparecer el nombre del elemento de biblioteca que acaba de crear en el 
menú emergente contiguo. 

12 Seleccione Actualizar elementos de biblioteca y, seguidamente, haga clic en 
Iniciar. 

13 Haga clic en Cerrar para salir del cuadro de diálogo Actualizar páginas. 

Configurar propiedades de elemento de biblioteca 

Utilice las propiedades de elemento de biblioteca para especificar el archivo de 
origen de un elemento, convertirlo en editable o volver a crearlo después de 
editarlo. Para abrir el inspector de propiedades, haga doble clic en un elemento de 
biblioteca. 

Orig Muestra el nombre y la ubicación del archivo de origen del elemento de 
biblioteca. 

Abrir Abre el archivo de origen del elemento de biblioteca. 

Separar del original Rompe el vínculo existente entre el elemento de biblioteca 
seleccionado y su archivo de origen. Cuando se separa un elemento, deja de ser un 
elemento de biblioteca y se convierte en un elemento editable. También puede 
elegir Separar del original en el menú contextual para separar un elemento de la 
biblioteca. 

Volver a crear Sobreescribe el elemento de biblioteca original con la selección 
actual. Utilice esta opción para volver a crear elementos de biblioteca si el 
elemento de biblioteca no está presente, si el nombre del elemento ha sido 
modificado o si el elemento ha sido editado. 
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Usar la paleta de bibliotecas 

La paleta de bibliotecas muestra todos los elementos del archivo de biblioteca del 

sitio local actual. 

Para ver la paleta de bibliotecas: 

• Elija Ventana > Biblioteca. 

Para agregar un elemento de biblioteca a un documento, lleve a cabo una de las 

siguientes operaciones: 

• Seleccione y arrastre un elemento desde la lista de la paleta de bibliotecas hasta 
el documento. 

• Seleccione un elemento de la lista de la paleta de bibliotecas y elija Agregar a 
página del menú contextual. 

Para abrir un elemento de biblioteca: 

• En la lista de la paleta de bibliotecas, haga clic con el botón derecho del ratón 
(Windows) o pulse Control y haga clic (Macintosh) en el elemento de 
biblioteca que desea abrir y elija Abrir del menú contextual. 

• En la lista de la paleta de bibliotecas, haga doble clic en el elemento que desea 
abrir. 

• Seleccione el elemento de la lista de la paleta de bibliotecas y haga clic en el 
icono Abrir elemento de biblioteca (el icono de carpeta situado en la parte 
inferior de la paleta) para realizar cambios en el elemento. 


Opciones de la paleta de bibliotecas 

Estos comandos se encuentran disponibles en el menú contextual de la paleta de 
bibliotecas. 

Crear elemento de biblioteca (icono de documento) Agrega la selección actual de 
la ventana de documento a la biblioteca como nuevo elemento. 

Borrar (icono de papelera) Elimina el elemento seleccionado de la biblioteca. 
Cambiar nombre Cambia el nombre del elemento seleccionado. 

Abrir (¡cono de carpeta) Abre el elemento seleccionado en una nueva ventana para 
que pueda editarlo. 

Agregar a página Coloca el elemento de biblioteca seleccionado en la página en el 
punto de inserción. No existe ningún icono para este comando; puede 
seleccionarlo del menú contextual. 

Seleccionar en ventana del sitio Selecciona el elemento resaltado en la ventana de 
documento. 

Actualizar páginas Abre el cuadro de diálogo Actualizar páginas, en el que podrá 
actualizar el sitio o los archivos que utilizan el elemento de biblioteca. 
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Usar server-side ineludes 


Los Server-side ineludes son instrucciones que el servidor incluye en el archivo 
especificado del documento actual. Dado que el procesamiento de los server-side 
ineludes tiene lugar en el servidor, el contenido incluido no aparece normalmente 
al abrir un documento de forma local en un explorador. No obstante, 
Dreamweaver muestra los server-side ineludes tanto en la ventana de documento 
como en la ventana de vista previa del explorador. Para mostrar el contenido 
incluido, Dreamweaver utiliza un traductor que imita la forma en que el servidor 
procesa las instrucciones del server-side inelude. 

La inclusión de un server-side inelude en un documento inserta sólo una 
referencia a un archivo externo. Dreamweaver muestra el contenido del archivo 
externo en la ventana de documento, lo que facilita el diseño de las páginas, pero 
no permite editar su contenido directamente en un documento. Para editar el 
contenido de un server-side inelude, deberá editar directamente el archivo que 
desea incluir. Los cambios realizados en el archivo externo se reflejarán 
automáticamente en todos los documentos que lo incluyan. 

Para insertar un server-side include: 

1 Elija Insertar > Server-Side Inelude o haga clic en el botón SSI del panel 
Común de la paleta de objetos. 

2 En el cuadro de diálogo que aparece, haga clic en el icono de carpeta para 
localizar un archivo o escriba la ruta del archivo que desea incluir. Luego haga 
clic en Aceptar. 


Ver server-side ineludes en Dreamweaver 

De forma predeterminada, Dreamweaver procesa todos los server-side ineludes no 
condicionales y los muestra en la ventana de documento. 

Para especificar los archivos que deben procesarse o desactivar el procesamiento 
de los server-side ineludes: 

1 Elija Edición > Preferencias > Traducción. 

2 Seleccione Server-Side Ineludes de la lista de traductores. 
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3 Seleccione una de las siguientes opciones para la traducción de server-side 
ineludes: 

En todos los archivos Se trata del valor predeterminado; déjelo activado para ver 
el contenido de los archivos incluidos en la ventana de documento. 

En ningún archivo Desactiva todo el procesamiento de server-side ineludes en 
Dreamweaver. 

En archivos con extensiones Hace que Dreamweaver procese los server-side 
ineludes sólo en archivos que terminen en .stm, .html, .htm, .shtml o .shtm. 

En archivos que coincidan con una de estas expresiones Hace que 
Dreamweaver busque en el documento coincidencias con las expresiones 
regulares enumeradas; si localiza coincidencias, Dreamweaver procesará los 
server-side ineludes del documento. 


Editar un server-side inelude 

Al igual que los elementos de biblioteca, los server-side ineludes se seleccionan 
como una unidad completa en la ventana de documento. A diferencia de los 
elementos de biblioteca, el código fuente HTML contenido en un server-side 
inelude no aparece en el inspector de código Fuente HTML. Por el contrario, 
aparece la instrucción del servidor en sí misma con el siguiente aspecto: 

< i—#¡nclude v¡rtual=7uber/html/footer.html" --> 

Para editar el contenido asociado al archivo incluido, deberá abrir el archivo. 

Para editar un server-side inelude: 

1 Seleccione el server-side inelude en la ventana de documento o en el inspector 
de código Fuente HTML y haga clic en Editar en el inspector de propiedades. 

El archivo incluido se abrirá en una nueva ventana de documento. 

2 Edite el archivo y luego guárdelo. 

Los cambios se reflejarán inmediatamente en el documento actual y en los 
documentos que abra posteriormente que contengan el archivo. 
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CAPÍTULO 15 

Crear formularios 


Los formularios permiten recoger información de los usuarios. Entre los usos más 
comunes de los formularios se encuentran las encuestas, los formularios de pedido 
y las interfaces de búsqueda. 

Los formularios necesitan dos componentes: el código fuente HTML que describe 
el formulario y una aplicación en la parte del servidor o una secuencia de 
comandos en la parte del cliente para procesar la información que el usuario 
introduce en los campos del formulario creados por el código HTML. 

Dreamweaver le permite crear formularios, agregarles objetos y, mediante los 
comportamientos, validar la información introducida por el usuario. Necesita un 
editor de texto para escribir una secuencia de comandos o una aplicación para 
procesar los datos del formulario. Perl es el lenguaje de secuencia de comandos 
más utilizado para el procesamiento de formularios. Otras opciones posibles son 
C, Java e incluso JavaScript. 

Los formularios de Dreamweaver pueden incluir objetos estándar como campos 
de texto, botones, campos de imagen, casillas de verificación, botones de opción, 
listas/menús, campos de archivo y campos ocultos. Dreamweaver también admite 
tipos de entrada que no reconoce mostrando las propiedades genéricas de campo 
en el inspector de propiedades. Consulte “Propiedades genéricas de campo” en la 
Ayuda de Dreamweaver. 



Crear un formulario 


Use el comando Insertar > Formulario o el panel Formularios de la paleta de 
objetos para crear un formulario. 

Para crear un formulario: 

1 Lleve a cabo una de estas operaciones: 

• Coloque el punto de inserción en la posición en que desea que aparezca el 
formulario y elija Insertar > Formulario. 

• Coloque el punto de inserción en la posición en que desea que aparezca el 
formulario y haga clic en el botón Formulario del panel Formularios, en la 
paleta de objetos. 

• Arrastre el botón Formulario a la posición deseada de la página. 

Si no se aprecia ningún resultado visible, compruebe que está activada la opción 
Ver > Elementos invisibles. 

2 Seleccione el formulario y establezca sus propiedades en el inspector de 
propiedades. Dispone de las opciones siguientes: 

Nombre del formulario Asigna un nombre al formulario. La asignación de 
nombre al formulario permite controlarlo con un lenguaje de secuencia de 
comandos como JavaScript o VBScript. 

Acción Identifica la aplicación de la parte del servidor que procesa la 
información del formulario, especificada como un URL. Haga clic en el icono 
de carpeta para localizar la aplicación o escriba la ruta correspondiente. 

Método Define cómo se manejan los datos del formulario. 

3 En el inspector de propiedades, elija uno de los siguientes métodos para definir 
la manera en que se gestionan los datos del formulario: 

Obtener Añade valores del formulario al URL y envía al servidor una petición 
GET. Dado que los URL están limitados a 8.192 caracteres, no utilice el método 
GET con formularios largos. 

Publicar Envía los valores del formulario en el cuerpo de un mensaje y envía al 
servidor una petición POST. 

Predeterminado Usa el método predeterminado del explorador 
(generalmente, GET). 


382 Capítulo 15 



Agregar un objeto a un formulario 

Al agregar un objeto a un formulario, se pueden establecer sus propiedades 
mediante el inspector de propiedades. 

Para agregar un objeto a un formulario: 

1 Lleve a cabo una de estas operaciones: 

• Coloque el punto de inserción dentro de los límites del formulario y elija un 
objeto en el menú Insertar > Objeto de formulario. 

• Coloque el punto de inserción dentro de los límites del formulario y haga clic 
en el botón de objeto del panel Formularios, en la paleta de objetos. 

• Arrastre un botón de objeto a la posición deseada dentro de los límites del 
formulario. 

2 Especifique las propiedades del objeto en el inspector de propiedades (elija 
Ventana > Propiedades para que aparezca el inspector de propiedades si no está 
abierto). 

Campos de texto Aceptan todo tipo de texto, tanto alfabético como numérico. 
El texto introducido puede mostrarse como una sola línea, múltiples líneas o 
como viñetas y asteriscos (para protección de la contraseña). Consulte 
“Propiedades genéricas de texto” en la Ayuda de Dreamweaver. 

Botones Llevan a cabo tareas cuando se hace clic en ellos, como enviar o 
restablecer formularios. Puede introducir una etiqueta personalizada para un 
botón, o bien usar una de las etiquetas predefinidas. Consulte “Propiedades de 
botones” en la Ayuda de Dreamweaver. 

Campos de imagen Pueden usarse en lugar de loOs botones Enviar. Consulte 
“Propiedades genéricas de imagen” en la Ayuda de Dreamweaver. 

Casillas de verificación Admiten múltiples respuestas en un solo grupo de 
opciones. Consulte “Propiedades de casillas de verificación” en la Ayuda de 
Dreamweaver. 

Botones de opción Representan opciones exclusivas de elección. Al seleccionar 
un botón en un grupo, se anula la selección de todos los demás botones del 
grupo. Consulte “Propiedades de botones de opción” en la Ayuda de 
Dreamweaver. 

Listas/menús Presentan una lista de valores que el usuario puede elegir. El 
objeto puede presentar un menú emergente, que sólo aparece cuando el usuario 
hace clic en el nombre del objeto (y que admite una sola selección), o un 
cuadro de lista, que siempre muestra los valores en una lista de desplazamiento 
(y que acepta más de una selección). Consulte “Propiedades de lista/menú” en 
la Ayuda de Dreamweaver. 
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Campos de archivo Permiten al usuario examinar los archivos de sus discos 
duros y cargarlos como datos de formulario. Consulte “Propiedades de campo 
de archivo” en la Ayuda de Dreamweaver. 

Campos ocultos Permiten almacenar información (como el destinatario de los 
datos de formulario o el objeto del formulario) que no son relevantes para el 
usuario, pero que serán usados por la aplicación que procesa el formulario. 
Consulte “Propiedades de campo oculto” en la Ayuda de Dreamweaver. 

Menú de salto Permite insertar un menú en el que cada opción está vinculada a 
un documento o un archivo. Consulte “Crear menús de salto”, en la 
página 122. 

3 Si lo desea, puede escribir una etiqueta o texto descriptivo junto al objeto. 

Puede aplicar formato de texto a las etiquetas de los objetos de formulario. Para 
obtener más información, consulte “Cambiar características de fuente”, en la 
página 179. 


Procesar formularios 

Los formularios son procesados por la secuencia de comandos o la aplicación 
especificada en el atributo ACTION de la etiqueta FORM. Seleccione un formulario y 
mire en el inspector de propiedades cuál es su acción asociada. 

Los formularios más simples usan JavaScript o VBScript para llevar a cabo todo el 
procesamiento del formulario en la parte del cliente (en contraposición con el 
envío de los datos de formulario al servidor para su procesamiento). Por ejemplo, 
al final de la página puede incluirse un pequeño formulario que contenga 
solamente dos botones de opción con las etiquetas Sí y No, junto con un botón 
Enviar. La acción del formulario puede ser una función de JavaScript definida en 
la sección HEAD del documento que muestre una advertencia si el usuario 
selecciona Sí y otra advertencia si el usuario selecciona No: 

function processForm(){ 

¡f (document.forms[0].elements[0],checked){ 
alert('Sí); 

}else{ 

alert('No'); 

} 

} 

Para usar una función JavaScript en la parte del cliente como acción del 
formulario: 

1 Seleccione un botón Enviar en un formulario. 

2 Adjunte el comportamiento Llamar JavaScript al botón. (Consulte “Llamar 
JavaScript”, en la página 307.) 
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3 En el cuadro de texto JavaScript que aparece mientras adjunta el 
comportamiento, introduzca processForm(). 

4 Agregue una función JavaScript processForm() (como la mostrada) a la sección 
HEAD del documento. 

Se pueden gestionar muchas tareas de procesamiento de formularios mediante 
secuencias de comandos en la parte del cliente, pero no se pueden guardar los 
datos introducidos por el usuario ni enviarlos a otra persona. Para hacer esto, se 
necesita una aplicación en la parte del servidor, como una secuencia de comandos 
Common Gateway Interface (CGI). Las secuencias de comandos CGI pueden 
escribirse en Perl, C, Java o en otros lenguajes de programación. Hay varios sitios 
en la Web que ofrecen secuencias de comandos CGI gratuitas, que se pueden usar 
tal como están o modificarlas para adaptarlas a las necesidades concretas. Consulte 
“Recursos técnicos HTML y Web”, en la página 19. También le puede preguntar a 
su proveedor de servicio Internet o equipo responsable del sitio Web si hay 
secuencias de comandos CGI ya configuradas para ejecutar en su servidor. 

Para obtener información introductoria sobre las secuencias de comandos CGI, 
consulte los recursos CGI que se encuentran en “Recursos técnicos HTML y 
Web”, en la página 19. 


Usar comportamientos con formularios 

Puede adjuntar comportamientos a formularios y objetos de formulario utilizando 
cualquiera de los comportamientos que aparecen en el inspector de 
comportamientos cuando se selecciona el formulario o un objeto de éste. Los 
comportamientos Validar formulario y Definir texto de campo de texto sólo están 
disponibles si se ha insertado un campo de texto en el documento. Cuando se 
aplica el comportamiento Validar formulario a un objeto de formulario, deberá 
especificar qué campo de texto se debe validar. Por ejemplo, si adjunta Validar 
formulario al botón Enviar, podría especificar un campo de texto creado para 
“Nombre”. 

Al aplicar comportamientos, deberá comprobar que todos los objetos del 
formulario que hay en el documento (y todos los demás objetos) tienen nombres 
exclusivos. Si utiliza el mismo nombre para dos objetos distintos, es posible que 
los comportamientos no funcionen correctamente, a pesar de que los objetos se 
encuentren en formularios distintos. 

Observe en Dreamweaver 2 no era necesario asignar nombres exclusivos a los 
objetos (en distintos formularios de la misma página). Si tiene páginas creadas en 
Dreamweaver 2 que incluyen varios objetos de formulario con el mismo nombre, 
deberá cambiarlos antes de asociar comportamientos. 
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Otras dos directrices sobre la asignación de nombres a objetos: 

• Los nombres de objetos de formulario (y otros objetos) deben comenzar con 
una letra (no con un número). 

• No utilice palabras reservadas de JavaScript (como top o navigator) para los 
nombres de los objetos. 

A continuación se explican los dos comportamientos específicos de los 
formularios. Para obtener información sobre otros comportamientos, consulte 
“Usar comportamientos”, en la página 297. 

Validar formulario Comprueba el contenido de los campos de texto especificados 
para asegurarse de que el usuario ha introducido el tipo correcto de datos. 
Consulte “Validar formulario”, en la página 331. 

Definir texto de campo de texto Sustituye el contenido de un campo de texto 
especificado por el contenido que usted especifique. Consulte “Definir texto de 
campo de texto”, en la página 326. 
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CAPÍTULO 16 

Personalizar Dreamweaver 


Dreamweaver puede personalizarse de muchas formas, lo que le permite trabajar 

de la forma que le resulte más familiar, cómoda y eficaz. 

A continuación se incluyen algunas de las formas en que se puede personalizar 

Dreamweaver: 

• Cambie la disposición de los objetos de la paleta de objetos de manera que 
aquéllos que usa con más frecuencia queden siempre visibles, cree nuevos 
paneles para reorganizar los objetos o agregue otros nuevos. Consulte “Cambiar 
la paleta de objetos”, en la página 388. 

• Cambie los métodos abreviados de teclado o los nombres de los elementos de 
menú, agregue nuevos comandos a los menús y elimine comandos existentes. 
Consulte “Personalizar menús de Dreamweaver”, en la página 391. 

• Edite el perfil de formato de origen para lograr un control aún más detallado 
sobre el código HTML que crea Dreamweaver. El archivo SourceFormat.txt 
incluye, entre otras cosas, toda la configuración de preferencias de Formato 
HTML. Consulte “Editar el perfil de formato del código fuente HTML”, en la 
página 397. 

• Cree sus propios comandos y paletas flotantes mediante JavaScript. Consulte 
“Ampliar Dreamweaver: principios básicos”, en la página 403. 

• Cambie el modo en que las etiquetas de terceros (como las etiquetas ASP y 
ColdFusion) aparecen en la ventana de documento. Consulte “Personalizar la 
interpretación y la apariencia de etiquetas de terceros”, en la página 404. 

• Establezca las preferencias para todo, desde combinaciones de colores y 
resaltado a configuraciones de sitios y exploradores. Consulte “Definir 
preferencias”, en la página 73. 



Cambiar la paleta de objetos 

Como opción predeterminada, la paleta de objetos está dividida en seis paneles: 
Caracteres, Común, Formularios, Marcos, Head e Invisibles. Si desea información 
sobre los objetos de estos paneles, consulte “Usar la paleta de objetos”, en la 
página 70. Los paneles corresponden a carpetas que se encuentran en la carpeta 
Configuration/Objects, dentro de la carpeta de la aplicación Dreamweaver. 

Por cada objeto de un panel de la paleta de objetos, habrá dos o tres archivos en la 
carpeta correspondiente: 

• Un archivo GIF que contiene un icono para el objeto. 

• Un archivo HTML que contiene el código HTML que debe insertarse en el 
archivo o un formulario HTML que le permite especiñcar los datos que deben 
insertarse (como el texto de un comentario, por ejemplo). 

• Un archivo JavaScript (opcional) que genera el código HTML que se insertará 
en el archivo. 

Puede mover objetos de un panel a otro, cambiar el nombre de los paneles y 
eliminar objetos de la paleta. Una vez que haya realizado cambios, podrá volver a 
cargar las extensiones para que los cambios aparezcan en la paleta de objetos. 

Para mover un objeto de un panel de la paleta de objetos a otro: 

Mueva el código HTML del objeto y los archivos GIF (y el archivo JavaScript, en 
el caso de que exista) de una carpeta a otra dentro de la carpeta Configuration/ 
Objects. Asegúrese de que mueve todos los archivos del objeto. 

Para cambiar el nombre de un panel de la paleta de objetos: 

Cambie el nombre de la carpeta correspondiente en la carpeta Configuration/ 
Objects. 

Para eliminar un objeto de la paleta de objetos: 

Mueva los archivos HTML, GIF y JavaScript del objeto al exterior de la carpeta 
Configuration/Obj ects. 

Para volver a cargar las extensiones después de realizar un cambio dentro de la 
carpeta Configuration/Objects: 

1 Pulse Control y haga clic (Windows) o pulse Opción y haga clic (Macintosh) 
en el menú emergente situado en la parte superior de la paleta de objetos. 

2 Elija Volver a cargar extensiones. 
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Crear un objeto simple 

Muchos objetos simples no requieren JavaScript; solamente contienen el código 
HTML que se insertará en el documento. Para obtener información básica sobre 
la creación de objetos complejos utilizando JavaScript, consulte “Ampliar 
Dreamweaver: principios básicos”, en la página 403. 


Para crear un objeto simple: 

1 Cree un nuevo documento en blanco en un editor de texto (por ejemplo, 
BBEdit o HomeSite). 

Puede usar el inspector de código Fuente HTML de Dreamweaver como editor 
de texto, pero primero tendrá que borrar todas las etiquetas que aparecen en el 
inspector de código Fuente HTML cuando cree un documento nuevo. 

2 Escriba o pegue las etiquetas que desee que este objeto inserte en 
sus documentos. 

Escriba, por ejemplo: 

<P> 

&copy; 2000 DCD Productions, lnc.<BR> 

Todos los derechos reservados 

</P> 

3 Guarde el archivo. 

Si desea que el nuevo objeto aparezca en uno de los paneles existentes de la 
paleta de objetos, guárdelo en una de las carpetas de objetos (Caracteres, 
Común, Formularios, Marcos, Head o Invisibles). Si desea crear un nuevo 
panel, cree una nueva carpeta en la carpeta Configuration/Objects y guarde el 
archivo en ella. Las carpetas adicionales contenidas en cualquier subcarpeta de 
un panel (como las carpetas creadas dentro de la subcarpeta Caracteres) son 
ignoradas. 

4 En un programa de gráficos o de edición de imágenes (como Macromedia 
Fireworks), cree una imagen GIF de 18 x 18 píxeles que sirva de icono del 
objeto en la paleta de objetos. 

Si crea una imagen más grande, Dreamweaver la reducirá automáticamente a 
18x18 píxeles. Si no crea un icono para el objeto, Dreamweaver insertará un 
icono de objeto genérico en la paleta de objetos. 

5 Asigne al icono el mismo nombre que el del archivo del objeto y guarde el 
icono en el mismo directorio que el archivo del objeto. 

Por ejemplo, si el objeto se denomina Copyright_DCD.htm y lo ha guardado 
en el directorio Común, asigne al icono el nombre Copyright_DCD.gif y 
guárdelo también en el directorio Común. 

6 Reinicie Dreamweaver para poder usar el nuevo objeto. El objeto aparecerá en 
la parte inferior del menú Insertar además de en la paleta de objetos. 
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Cambiar el tipo de archivo predeterminado 

De forma predeterminada, Dreamweaver muestra todos los tipos de archivo que 
reconoce en el cuadro de diálogo Archivo > Abrir. Puede utilizar el menú 
emergente del cuadro de diálogo para que sólo se muestren los archivos de un tipo 
determinado. Si la mayor parte de su trabajo implica la utilización de un tipo de 
archivo específico (como archivos ASP, por ejemplo), puede cambiar la 
visualización predeterminada. 


Para cambiar el tipo de archivo predeterminado de Archivo > Abrir en 

Dreamweaver: 

1 Realice una copia de seguridad del archivo Extensions.txt en la carpeta 
Configuration por si desea restaurar los valores predeterminados 
posteriormente. 

2 Abra el archivo Extensions.txt en un editor de texto. (No lo abra en 
Dreamweaver.) 

3 Corte la línea correspondiente al nuevo valor predeterminado y pegúela como 
primera línea del archivo. Seguidamente, guarde el archivo y vuelva a iniciar 
Dreamweaver para ver el nuevo valor predeterminado. 


Para agregar nuevos tipos de archivos al menú en el cuadro de diálogo Archivo > 

Abrir: 

1 Realice una copia de seguridad del archivo Extensions.txt en la carpeta 
Configuration por si desea restaurar los valores predeterminados 
posteriormente. 

2 Abra el archivo Extensions.txt en un editor de texto. (No lo abra en 
Dreamweaver.) 

3 Agregue una nueva línea al archivo por cada nuevo tipo de archivo. Introduzca 
en mayúsculas las extensiones de nombres de archivos que puede tener el nuevo 
tipo de archivo, separadas mediante comas; después agregue dos puntos y una 
breve frase descriptiva que aparecerá en el menú Archivo > Abrir. Por ejemplo, 
para archivos JPEG, introduzca 

JPG,JPEG,JFIF:Arch¡vos de imagen JPEG 

4 Guarde el archivo y vuelva a iniciar Dreamweaver para los cambios. 
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Personalizar menús de Dreamweaver 


Dreamweaver crea todos sus menús a partir de la estructura definida en un archivo 
XML denominado menus.xml, situado en la subcarpeta Configuration/Menus de 
la carpeta de la aplicación Dreamweaver. Al editar el archivo menus.xml, los 
menús de Dreamweaver aparecerán modificados la siguiente vez que inicie 
Dreamweaver. (Para obtener información básica sobre XML, consulte “XML”, en 
la página 369.) 

Mediante la edición del archivo menus.xml, podrá agregar, cambiar y eliminar 
métodos abreviados de teclado para los elementos de los menús. También puede 
reorganizar, cambiar el nombre y eliminar elementos de los menús. 

Nota: Cree siempre una copia de seguridad del archivo menus.xml o de cualquier otro 
archivo de configuración de Dreamweaver antes de modificarlo. No es difícil que se cometan 
errores al editar el archivo de configuración de menús y no existe ninguna forma de que 
Dreamweaver recupere el juego de menús anterior. No obstante, la carpeta Configuraron 
contiene una copia de seguridad del archivo menus.xml predeterminado, denominada 
menus.bak; para recuperar el juego de menús predeterminado, reemplace el archivo 
menus.xml con una copia de menus.bak. 


Editar el menú Comandos 

Puede editar determinados tipos de comandos del menú Comandos, así como 
cambiar sus nombres, sin necesidad de editar el archivo menus.xml. 

Para crear nuevos comandos y que se incluyan automáticamente en el menú 
Comandos, utilice la paleta de marcador (consulte “Crear comandos a partir de los 
pasos de marcador”, en la página 102). 

Para cambiar los nombres de los comandos ya creados o para quitarlos del menú 
Comandos, elija Comandos > Editar lista de comandos. (Tenga en cuenta que, al 
eliminar un comando del menú mediante este método, también se borrará el 
archivo que contiene el comando.) 

Nota: Para reordenar los elementos del menú Comandos, o para pasar los elementos de un 
menú a otro, deberá editar el archivo menus.xml. El término "comando” tiene dos acepciones 
en Dreamweaver. Desde el punto de vista de un desarrollador de extensiones, un comando 
es un tipo concreto de extensión. En algunos contextos, sin embargo, "comando" se utiliza 
indistintamente con el término "elemento de menú" para referirnos a un elemento que 
aparece en un menú de Dreamweaver, independientemente de lo que haga y de cómo haya 
sido incorporado a la aplicación. 
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Sintaxis de menús 


Tenga cuidado a la hora de realizar cambios en los menús. Dreamweaver prescinde 
de todos los menús o elementos de menú que contengan errores de sintaxis XML. 

El archivo menus.xml contiene una lista estructurada de barras de menús, menús y 
elementos de menú. Una barra de menús (que cuenta con etiquetas inicial y de 
cierre MENUBAR) es un menú o conjunto de menús; por ejemplo, existe una barra 
de menús principal, una barra de menús independiente para la ventana Sitio (para 
Windows solamente) y una barra de menús para cada menú contextual. Cada 
barra de menús contiene uno o varios menús; un menú está rodeado por las 
etiquetas <MENU> y </MENU>. Cada menú consta de uno o varios elementos de 
menú, todos ellos descritos por su correspondiente etiqueta MENUITEM y sus 
atributos. (Un menú también puede contener separadores y submenús.) Por 
ejemplo, lo que sigue es una parte de la definición de la barra de menús principal 
(ventana de documento): 

<menubar name="Ventana principal" id = "DWMainW¡ndow"> 

<menu name="_Archivo n id="DWMenu_File"> 

<menuitem name="_Nuevo M key="Cmd + N M enabled="true" 
command="dw.createDocument()" /> 

...aquí van otros elementos de menú, separadores y submenús... 

</menu> 

.. .aquí van otros menús... 

</menubar> 


Reorganizar menús 

Puede mover elementos de menú dentro de un mismo menú o de un menú a otro, 

cambiar el orden de los menús dentro de una barra de menús y agregar 

separadores o quitarlos de los menús. 

Puede mover elementos hacia o desde menús contextúales utilizando el mismo 

procedimiento que para los demás menús. 

Para mover un elemento de menú: 

1 Salga de Dreamweaver. 

2 Realice una copia de seguridad del archivo menus.xml. 

3 Abra el archivo menus.xml en un editor de texto, como por ejemplo BBEdit, 
HomeSite o Wordpad (no lo abra en Dreamweaver). 

4 Corte una etiqueta MENUITEM completa, desde cmenuitem, situada al comienzo, 
hasta /> , situada al final. 

5 Coloque el punto de inserción en un nuevo lugar. 

6 Pegue el elemento de menú en la nueva ubicación. (Asegúrese de que se 
encuentra entre una etiqueta <MENU> y su correspondiente etiqueta </ 
MENU>.) 


392 Capítulo 16 



Para crear submenús, anide un par de etiquetas MENU inicial y de cierre dentro de 
un menú. Es decir, inserte un nuevo par <MENUx/MENU> en un menú y, 
seguidamente, agregue los nuevos elementos de menú entre estas dos etiquetas. 

Para insertar un separador entre dos elementos de menú: 

Introduzca <SEPARATOR /> entre las dos etiquetas MENUITEM. 

Para quitar un separador existente, elimine la correspondiente línea <SEPARATOR/>. 


Sintaxis de elementos de menú 

Lo que siguen son atributos de la etiqueta MENUITEM: 

ÑAME Es el nombre del elemento de menú que aparece en el menú. (El guión bajo 
indica que la letra que sigue es la letra de selección del comando -sólo Windows-.) 
Obligatorio. 

ID Lo utiliza Dreamweaver para identificar el elemento. El ID debe ser exclusivo en 
toda la estructura de menús. Si agrega nuevos elementos de menú a menus.xml, 
utilice el nombre de su empresa u otra cadena de texto exclusiva como prefijo del 
ID de cada elemento de menú para asegurarse de que no se repitan. Obligatorio. 

KEY Es el método abreviado de teclado para el comando, caso de tener alguno. 
Utilice las siguientes cadenas para especificar teclas de modificación: 

• Cmd Especifica la tecla Control (Windows) o la tecla Comando (Macintosh). 

• Alt y Opt Especifican indistintamente la tecla Alt (Windows) o la tecla 
Opción (Mac). 

• Shift Especifica la tecla Mayús en ambas plataformas. 

• Ctrl Especifica la tecla Control en ambas plataformas. 

• Las teclas de modificación van separadas por un signo más (+) si un método 
abreviado concreto utiliza varias de ellas. Por ejemplo, Cmd+0pt+5 en el 
atributo KEY significa que el menú se ejecuta pulsando Control+Alt+5 
(Windows) o Comando+Opción+5 (Macintosh). 

• Las teclas especiales se especifican por su nombre en inglés. F1 a F12, PgDn, 
PgUp, Home, End, Ins, Del, Tab, Esc, BkSp y Space. Las teclas de 
modificación también pueden aplicarse a teclas especiales. 

PLATFORM indica en qué plataforma aparece el elemento. Los valores válidos son 
win, que significa Windows sólo, o mac, que significa Macintosh sólo. El valor 
predeterminado (si no especifica este atributo) es para que el elemento aparezca en 
ambas plataformas. 

ENABLED Es el nombre de la función JavaScript que determina si el elemento de 
menú está actualmente activado. Si la función devuelve el valor false, el menú se 
mostrará atenuado. 
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COMMAND Es una expresión JavaScript que se ejecuta cuando el usuario 
selecciona el elemento del menú. En el caso de código JavaScript complejo, utilice 
en su lugar un archivo JavaScript (especificado mediante el atributo FILE). Deberá 
especificar FILE o COMMAND por cada elemento del menú. 

FILE Es el nombre de un archivo HTML que contiene código JavaScript que 
controla el elemento de menú. La ruta especificada en el atributo FILE es relativa a 
la carpeta Configuration. Tenga en cuenta que el atributo FILE anula los atributos 
COMMAND, ENABLED y CHECKED. Deberá especificar FILE o COMMAND por cada 
elemento del menú. Para obtener información sobre la creación de un archivo de 
comando mediante la paleta de marcador, consulte “Crear comandos a partir de 
los pasos de marcador”, en la página 102. Para obtener información sobre la 
escritura de sus propios comandos JavaScript comenzando desde cero, consulte 
Ampliación de Dreamweaver. 

CHECKED Es una expresión JavaScript que indica si el elemento de menú tiene una 
marca de comprobación junto a él en el menú; si la expresión da como resultado el 
valor true, el elemento se mostrará con una marca de comprobación. 

DYNAMIC Si está presente este elemento, indica que el elemento de menú debe 
determinarse dinámicamente, mediante un archivo HTML que contiene código 
JavaScript, para definir el texto y el estado del elemento de menú. Si especifica una 
etiqueta como DYNAMIC, también deberá especificar un atributo FILE. 


Cambiar métodos abreviados de teclado 

Si los métodos abreviados de teclado predeterminados no le satisfacen, puede 

cambiarlos, eliminarlos o agregar otros nuevos. 

Para cambiar un método abreviado de teclado: 

1 Salga de Dreamweaver. 

2 Realice una copia de seguridad del archivo menus.xml. 

3 Abra el archivo menus.xml en un editor de texto, como por ejemplo BBEdit, 
HomeSite o Wordpad (no lo abra en Dreamweaver). 

4 Consulte la “Matriz de métodos abreviados”, en la página 424 y localice un 
método abreviado que no esté siendo utilizado o que desee reasignar. (Si 
reasigna un método abreviado de teclado, táchelo en una copia impresa de la 
matriz para futuras consultas.) 

5 Si va a reasignar un método abreviado de teclado, localice el elemento de menú 
al que está asignado el método abreviado y elimine el atributo KEY=“shortcuf de 
dicho elemento de menú. 

6 Localice el elemento de menú al que desea asignar el método abreviado de 
teclado. 
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7 Si el elemento de menú ya dispone de método abreviado, localice el atributo key 
en esa línea. Si no dispone de método abreviado, agregue KEY="" en cualquier 
lugar dentro de la etiqueta MENUITEM. 

8 Entre las comillas dobles del atributo KEY, introduzca el nuevo método 
abreviado de teclado. 

Utilice el signo más (+) entre las teclas de modificación y entre éstas y las letras 
de teclas. Para obtener más información sobre las teclas de modificación, 
consulte “Sintaxis de elementos de menú”, en la página 393. 

Si el método abreviado de teclado está siendo utilizado en algún otro lugar y no 
lo ha eliminado en ese otro lugar, el método abreviado sólo funcionará para el 
primer elemento de menú para el que haya sido utilizado en menus.xml. 

Nota: Si lo desea, puede utilizar el mismo método abreviado de teclado para un 
elemento de menú para Macintosh sólo y para un elemento de menú para Windows sólo. 

9 Escriba el nuevo método abreviado en la ubicación adecuado de la Matriz de 
métodos abreviados. 

Cambiar el nombre de un elemento de menú 

Puede cambiar fácilmente el nombre de cualquier elemento de cualquier menú. 

Para cambiar el nombre de un elemento de menú: 

1 Salga de Dreamweaver. 

2 Realice una copia de seguridad del archivo menus.xml. 

3 Abra el archivo menus.xml en un editor de texto, como por ejemplo BBEdit, 
HomeSite o Wordpad (no lo abra en Dreamweaver). 

4 Localice la correspondiente etiqueta MENUITEM y cambie el valor de su atributo 
ÑAME. No cambie el atributo ID del elemento. 
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Personalizar la apariencia de cuadros de 
diálogo 

El diseño de los cuadros de diálogo para objetos, comandos y comportamientos se 
especifica mediante formularios HTML en archivos HTML del directorio 
Configuration del directorio de la aplicación Dreamweaver. Puede editar estos 
formularios utilizando Dreamweaver; consulte “Crear formularios”, en la 
página 381. 

Para cambiar la apariencia de un cuadro de diálogo: 

1 Localice el correspondiente archivo .htm en Configuration/Objects o 
Configuration/Commands o Configuration/Behaviors. 

2 Cree una copia del archivo en algún lugar situado fuera de la carpeta 
Configuration. 

3 Abra la copia en Dreamweaver, edite el formulario y guarde la copia. 

4 Salga de Dreamweaver. 

5 Copie la copia modificada de nuevo a la carpeta Configuration y reemplace la 
original. (Es recomendable crear primero una copia de seguridad del original, 
de forma que pueda restaurarlo en el caso de que lo necesite.) 

6 Inicie de nuevo Dreamweaver para ver los cambios. 

Sólo debe cambiar la apariencia del cuadro de diálogo, no su funcionamiento; 
deberá contener los mismos tipos de elementos de formulario, con los mismos 
nombres, de manera que la información que Dreamweaver obtiene a través del 
cuadro de diálogo pueda seguir utilizándose de la misma forma. 

Por ejemplo, el objeto Comentario recibe entradas de texto de un área de texto del 
cuadro de diálogo y después utiliza una función JavaScript sencilla para convertir 
dicho texto en un comentario HTML que se inserta en el documento. El 
formulario que describe al cuadro de diálogo se encuentra en Configuration/ 
Objects/Invisibles/Comment.htm. Puede abrir dicho archivo y cambiar el tamaño 
y otros atributos del área de texto, pero si elimina la etiqueta TEXTAREA completa o 
si cambia el valor de su atributo ÑAME, el objeto Comentario dejará de funcionar 
correctamente. 
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Editar el perfil de formato del código fuente 
HTML 

El perfil de formato del código fuente HTML determina el formato que 
Dreamweaver aplica al código fuente HTML en un documento. El perfil incluye 
las preferencias de formato para etiquetas individuales y para grupos de etiquetas, 
junto con las preferencias de Formato HTML (establecidas con el comando 
Edición > Preferencias). Puede editar el archivo SourceFormat.txt en un editor de 
texto para controlar con precisión la forma en que Dreamweaver escribe el código 
HTML. El perfil es un archivo de texto guardado en la carpeta Configuration, en 
la carpeta de la aplicación Dreamweaver. 

Las preferencias de Formato HTML establecidas mediante el comando 
Preferencias se guardan en el archivo SourceFormat.txt al salir de Dreamweaver y 
los cambios realizados en el perfil no tendrán efecto hasta que se reinicie 
Dreamweaver. Por ello, para asegurar el acceso a la configuración de nuevas 
preferencias, debe salir del programa antes de editar el perfil. 

El perfil de formato del código fuente HTML sigue un formato específico, que 
está contenido en un archivo. Observe las convenciones siguientes: 

• Cada sección del perfil comienza con <lpalabra clave> (por ejemplo, 
<?OPTIONS>, <?ELEMENTS>, <?ATTRIBUTES>). 

• Los parámetros de cada sección están definidos en los comentarios HTML 
(<!—>) directamente encima de la sección. 

• La línea OMIT de la sección <?OPTIONS> está reservada para uso futuro 
(actualmente no afecta al formato del código fuente HTML). 

• Una etiqueta individual puede marcarse como perteneciente a un grupo de 
sangría (IGROUP) en la sección <?ELEMENTS>. De forma predeterminada, 
IGROUP 1 contiene filas y columnas de tabla, mientras que IGROUP 2 contiene 
conjuntos de marcos y marcos. Estos grupos corresponden a las opciones 
Sangrar filas y columnas de tabla y Sangrar conjuntos de marcos y marcos, del 
cuadro de diálogo de preferencias de Formato HTML. La sangría puede 
activarse o desactivarse para el grupo entero mediante la eliminación de su 
número del atributo ACTIVE en la sección <?OPTIONS>. También puede agregar 
otras etiquetas a IGROUP 1 o 2 de modo que pueda controlarlas con las opciones 
de las preferencias de Formato HTML. 
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Por ejemplo, la configuración predeterminada para la etiqueta P en el archivo 
SourceFormat.txt es <P BREAK="1,0,0,1" INDENT>, que da lugar a lo siguiente: 

<p> Un párrafo de texto que está sangrado con respecto al margen izquierdo y que tiene 
un salto antes 

de la etiqueta P inicial y después de la etiqueta P de cierre, pero no después de la 
etiqueta P inicial ni antes de la etiqueta P de cierre. </p> 

<p>Párrafo siguiente.</p> 

Si cambia la configuración a <P BREAK="1,1,1,2">, obtendrá lo siguiente: 

<P> 

Un párrafo de texto que está sangrado con respecto al margen izquierdo y que no tiene 
ningún salto antes 

ni después de la etiqueta P inicial, con un salto antes de la etiqueta P de cierre y dos saltos 
tras la etiqueta P de cierre. 

</p> 

<P> 

Párrafo siguiente. 

</p> 

La configuración de algunas etiquetas y atributos incluye los términos NAMECASE o 
SAMECASE. NAMECASE especifica que la etiqueta o el atributo debe mostrarse en 
mayúsculas de una forma determinada. Por ejemplo, onClick se especifica como 
<onClick namecase="onClick n >, lo que indica que debe mostrarse siempre con las 
mayúsculas y minúsculas especificadas y no con todas mayúsculas ni todas 
minúsculas. Dreamweaver utiliza SAMECASE para asegurarse de que utiliza la forma 
en mayúsculas/minúsculas correcta al generar determinados atributos; no borre 
SAMECASE de ninguna de las especificaciones de formato de atributos en las que 
aparece. 

Cualquier atributo no especificado en el archivo SourceFormat.txt utilizará la 
configuración de formato predeterminada que especifique en el panel de 
preferencias de Formato HTML. 
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Perfiles de exploradores 

Los perfiles de exploradores son los archivos con los que se comparan los 
documentos cuando se ejecuta Comprobar exploradores de destino (consulte 
“Comprobar la compatibilidad de una página con los exploradores de destino”, en 
la página 166). Cada perfil contiene información sobre las etiquetas y atributos 
HTML compatibles con un explorador determinado. También puede contener 
advertencias, mensajes de error y sugerencias para sustituciones de etiquetas. 

Los perfiles de exploradores se almacenan en la carpeta Configuration/ 
BrowserProfiles, dentro de la carpeta de la aplicación Dreamweaver. Se pueden 
editar los perfiles existentes o crear otros nuevos con un editor de texto (por 
ejemplo, BBEdit, HomeSite, Bloc de notas, o SimpleText). No es necesario salir 
de Dreamweaver para editar o crear perfiles de explorador. 


Aplicar formato a perfiles de explorador 

Los perfiles de explorador tienen un formato específico. Para evitar errores de 

análisis durante las comprobaciones del explorador de destino, siga estas normas al 

crear o editar perfiles: 

• La primera línea está reservada para el nombre del perfil. Debe ir seguida de un 
solo retorno de carro. El nombre de esta línea aparece en el cuadro de diálogo 
Comprobar exploradores de destino y en el informe de comprobación de 
destino. El nombre debe ser único. 

• La segunda línea se reserva para el designador PROFILE_TYPE = BROWSER_PROFILE. 
Dreamweaver usa esta línea para determinar los documentos que son perfiles de 
explorador. No se debe cambiar ni mover. 

• Dos guiones (—) al principio de una línea indican un comentario (es decir, que 
la línea será ignorada durante el proceso de comprobación del destino). 

• Deberá aparecer un espacio en los siguientes lugares: antes del paréntesis 
angular de cierre (>) en la línea ¡ELEMENT, después del paréntesis inicial, antes 
del paréntesis de cierre y antes y después de cada barra vertical (|) en la lista de 
valores. 

• Debe aparecer un signo de admiración sin espacio antes de las palabras 
siguientes. ELEMENT, ATTLIST, Error, msgyhtmlmsg (¡ELEMENT, ¡ATTLIST, ¡Error, !msg, 
¡htmlmsg). 

• ¡Error (error) y ¡Warning (advertencia) pueden aparecer dentro de ¡ELEMENT o del 
área ¡ATTLIST. 

• Los mensajes ¡msg solamente pueden contener texto sin formato. Los mensajes 
¡htmlmsg pueden contener cualquier código HTML válido, incluidos 
hipervínculos. 
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• Los comentarios HTML (<!—>) no se pueden enumerar como etiquetas en 
los perfiles de explorador porque interfieren con el análisis. Dreamweaver no 
informa de errores en los comentarios porque estos son compatibles con todos 
los exploradores. 

La sintaxis de una entrada de etiqueta es 

clELEMENT htmITag NAME = "tagName" > 

<!ATTLIST htmITag 

unsupportedAttríbutel ¡Error !msg = "EI atributo unsupportedAttríbutel de la etiqueta 
htmITag no es compatible. Inténtelo con supportedAttríbutel para lograr un efecto similar." 
supportedAttribute 1 

supportedAttr¡bute2(validValue1 \ validValue2 \ valldValue3 ) 
unsupportedAttribute2\Enor !htmlmsg="<b>No utilice nunca este atributo 
unsupportedAttribute2 de la etiqueta htmITag !!</b>" 

> 

en donde 

htmITag es la etiqueta que aparece en un documento HTML. 

tagName es la forma en que se denomina a la etiqueta (por ejemplo, la etiqueta HR 
se denomina "regla horizontal"). El atributo ÑAME es opcional. Si se especifica, 
tagName se utiliza en el mensaje de error; si no se proporciona ningún nombre, se 
utiliza htmITag. 

unsupportedAttribute es un atributo no admitido. Se considera que todas las 
etiquetas o los atributos que no se mencionan específicamente no son admitidos. 
Especifique etiquetas o atributos no admitidos solamente cuando desee crear una 
mensaje de error personalizado. 

supportedAttribute es un atributo admitido por la etiqueta htmITag. Solamente las 
etiquetas que aparecen en la lista sin una designación de I Error se consideran 
admitidas por el explorador. 

valldValue es un valor admitido por el atributo. 
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En el siguiente ejemplo se muestra una entrada para la etiqueta APPLET que podría 
ser adecuada para Navigator 3.0: 

<!ELEMENT APPLET Name="Java Applet" > 

<!ATTLIST APPLET 

Align (top | middie | bottom | left | right | absmiddle | absbottom | baseline | texttop 

) 

Alt 

Archive 

ClassIWarning !htmlmsg = “Este explorador ignora el atributo <CODE>CLjASS</CODE> 
para la etiqueta <CODE>APPLET</CODE>." 

Code 

Codebase 

Height 

HSpace 

ID IWarning !htmlmsg=''Este explorador ignora el atributo <CODE>ID</CODE> para 
la etiqueta <CODE>APPLET</CODE>. Use <CODE>NAME</CODE> en su lugar." 

Ñame 

StylelWarning !htmlmsg = "Este explorador ignora el atributo <CODE>STYLE</CODE> 
para la etiqueta <CODE>APPLET</CODE>." 

VSpace 

Width 

> 


Crear un perfil de explorador 

Puede crear un perfil de explorador modificando un perfil existente. Por ejemplo, 
para crear un perfil para Netscape Navigator 5.0, se puede abrir el perfil para 
Navigator 4.0, agregar cualquier etiqueta o atributo nuevos incorporados en la 
versión 5.0 y guardarlo como perfil de Netscape Navigator 5.0. 

Para crear un perfil de explorador: 

1 Con un editor de texto, abra el perfil que se parezca más al perfil que desea 
crear, o abra el perfil que desea cambiar. 

2 Cambie el nombre del perfil. 

El nombre del perfil aparece en la primera línea. No puede haber dos perfiles 
con el mismo nombre. 

3 Agregue todas las etiquetas o atributos nuevos que sepa que son compatibles 
con el explorador, de acuerdo con la sintaxis que se indica en “Aplicar formato a 
perfiles de explorador”, en la página 399. 

Si no desea recibir mensajes de error sobre una determinada etiqueta no 
compatible, agréguela a la lista de etiquetas no admitidas. Si incluye las 
etiquetas no admitidas en la lista de etiquetas admitidas, guarde el perfil en un 
archivo distinto con un nuevo nombre (por ejemplo, NombreExplorador x.x 
limitado). Al cambiar el nombre del perfil se conserva el perfil original sólo con 
las etiquetas que verdaderamente son admitidas por el explorador. 
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4 Elimine todos los atributos o etiquetas que no sean admitidos por el explorador. 

Este paso probablemente no sea necesario si se está creando un perfil para la 
siguiente versión de Netscape Navigator o Microsoft Internet Explorer, dado 
que los exploradores no suelen reducir su compatibilidad con las etiquetas de 
una versión a otra posterior. 

5 Agregue los mensajes de error personalizados que desee, de acuerdo con la 
sintaxis que se indica en “Aplicar formato a perfiles de explorador”, en la 
página 399. 

Los perfiles suministrados con Dreamweaver incluyen todas las etiquetas 
admitidas; también pueden incluir líneas de comentarios con algunas etiquetas 
de uso frecuente pero no admitidas. Para agregar un mensaje de error 
personalizado, borre los dos guiones del principio de la línea y agregue !msg 
"message" o ¡htmlmsg "<tag>mensaje</tag>“ después de ¡Error. Por ejemplo, esta 
notación podría aparecer en el perfil de Netscape Navigator 3.0: 

dELEMENT HR name="Regla horizontal" > 

<!ATTLIST HR 
- COLOR ¡Error 

> 

Para agregar un mensaje de error personalizado, borre los guiones y añada el 
mensaje precedido por !msg: 

<!ELEMENT HR name="Regla horizontal" > 

< ¡ATTLIST HR 

COLOR ¡Error ¡msg "Internet Explorer 3.0 admite COLOR en reglas horizontales, pero no 
Netscape Navigator 3.0." 

> 

6 Puede utilizar ¡Error para todas las situaciones de error, o bien puede utilizar 
¡Warnlng para indicar que una etiqueta será ignorada pero que no provocará 
ningún error. 
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Ampliar Dreamweaver: principios básicos 

El diseño de Dreamweaver está pensado para que pueda ser ampliado. Incluye un 
intérprete JavaScript para leer y ejecutar código JavaScript, además de una interfaz 
de programación de aplicaciones (API) que consta de un amplio juego de 
funciones JavaScript para que los programadores puedan ampliar las capacidades 
de Dreamweaver. Dreamweaver también proporciona un modelo de objeto de 
documento (DOM) que permite que las extensiones examinen y modifiquen la 
estructura y el contenido de un documento. 

Mediante la API JavaScript, podrá crear objetos, acciones de comportamiento, 
comandos, inspectores de propiedades, paletas flotantes y traductores de datos 
(todos ellos conocidos en conjunto como extensiones). 

También puede crear nuevos objetos y nuevos comandos sencillos sin poseer 
conocimiento alguno de programación; consulte “Cambiar la paleta de objetos”, 
en la página 388 y “Crear comandos a partir de los pasos de marcador”, en la 
página 102 para más detalles. Sin embargo, para agregar capacidades más 
avanzadas a Dreamweaver deberá escribir extensiones, bien en JavaScript o en C. 
Para obtener información sobre el DOM y la API, consulte Ampliación de 
Dreamweaver. 

JavaScript 

JavaScript es un lenguaje de programación interpretado. Para adquirir mayores 
conocimientos sobre JavaScript, consulte alguna bibliografía adecuada, como 
JavaScript Bible de Danny Goodman (IDG) o JavaScript: The Defmitive Guide de 
David Flanagan (O’Reilly). Para obtener información sobre la ampliación de 
Dreamweaver con JavaScript, consulte Ampliación de Dreamweaver. 

Nota: A pesar de la similitud existente entre ambos nombres, JavaScript no tiene ninguna 
relación con Java. 
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Editar comandos de Dreamweaver 


Todos los comandos de los menús de Dreamweaver, incluidos aquéllos que usted 
cree y guarde utilizando la paleta de marcador (consulte “Crear comandos a partir 
de los pasos de marcador”, en la página 102), están implementados en JavaScript. 
Este código JavaScript normalmente consta sobre todo de llamadas a funciones 
proporcionadas por la API de ampliación de Dreamweaver. Si conoce el lenguaje 
JavaScript y comprende el funcionamiento de la API de ampliación de 
Dreamweaver, podrá editar el código JavaScript para cambiar el funcionamiento 
de los comandos de Dreamweaver. 

Nota: No se aventure a cambiar el código JavaScript a no ser que esté completamente 
seguro de lo que está haciendo. 

Para cambiar el nombre de un comando, mover un comando a otro menú distinto 
o agregar un método abreviado de teclado a un comando, consulte “Personalizar 
menús de Dreamweaver”, en la página 391. 


Personalizar la interpretación y la apariencia 
de etiquetas de terceros 

Las tecnologías de procesamiento del lado del servidor, como ASP, PHP, 
ColdFusion y JSP, utilizan código especial ajeno a HTML en los archivos HTML; 
los servidores crean y proporcionan contenido HTML basado en dicho código. 
Cuando Dreamweaver encuentra etiquetas ajenas a HTML, las compara con la 
información de sus archivos de etiquetas de terceros, en los que se define cómo 
debe Dreamweaver leer y mostrar las etiquetas ajenas a HTML. 

Por ejemplo, los archivos de ASP (Active Server Pages) contienen código para que 
lo interprete el servidor. Este código se indica mediante un par de delimitadores: 
comienza con la cadena <% y termina con la cadena %>. En la carpeta 
Configuradon/ThirdPartyTags de Dreamweaver se incluye un archivo 
denominado ASP.xml en el que se describe el formato del código ASP y se define 
cómo debe mostrar Dreamweaver dicho código. Debido a la forma en que se 
especifica el código ASP en el archivo ASP.xml, Dreamweaver no intenta 
interpretar nada de lo que haya entre los delimitadores inicial y final. 

Puede definir sus propias etiquetas y crear archivos de base de datos de etiquetas 
para definir cómo debe leerlas y mostrarlas Dreamweaver. La creación de archivos 
de base de datos de etiquetas resulta particularmente útil si emplea un sistema de 
formato del lado del servidor distinto a ASP, ColdFusion o PHP; cree un nuevo 
archivo de base de datos de etiquetas por cada sistema de formato para indicar a 
Dreamweaver cómo debe mostrar las etiquetas. 
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Nota: En esta sección se explica cómo definir la apariencia de una etiqueta personalizada 
dentro de Dreamweaver, pero no cómo editar el contenido ni las propiedades de una 
etiqueta personalizada. Para obtener información sobre cómo crear un inspector de 
propiedades para inspeccionar y cambiar las propiedades de una etiqueta personalizada, 
consulte "Inspectores de propiedades" en Ampliación de Dreamweaver. 

Cada archivo de base de datos de etiquetas define el nombre, el tipo, el modelo de 
contenido, el esquema resultante y el icono de una o varias etiquetas 
personalizadas. Puede crear cualquier número de archivos de base de datos 
de etiquetas, pero todos ellos deberán encontrarse en la carpeta Configuration/ 
ThirdPartyTags para que Dreamweaver pueda leerlos y procesarlos. Los archivos 
de base de datos de etiquetas tienen la extensión .xml. 

Si está trabajando en varios sitios distintos no relacionados (por ejemplo, si es 
usted un diseñador autónomo), coloque todas las especificaciones de etiquetas 
correspondientes a un sitio concreto en un archivo. Después, simplemente incluya 
dicho archivo de base de datos de etiquetas junto a los iconos e inspectores de 
propiedades personalizados que facilitará a las personas responsables de mantener 
el sitio. 

La especificación de una etiqueta se define mediante una etiqueta XML 
denominada TAGSPEC; por ejemplo, el siguiente código describe la especificación 
para la etiqueta HAPPY: 

<TAGSPEC TAG_NAME="happy“ TAG_TYPE=“nonempty" RENDER_CONTENTS="faIse" 
CONTENT_MODEL="marker_model" ICON = “happy.g¡f IC0N_WIDTH="18” 

IC0N_HEIGHT="18”></TAGSPEC> 

Existen dos tipos de etiquetas definidas mediante TAGSPEC: etiquetas normales de 
estilo HTML y etiquetas delimitadas por cadenas, que comienzan con una cadena y 
terminan con otra. Las etiquetas delimitadas por cadenas son como etiquetas 
HTML vacías (por ejemplo, IMG) en lo que se refiere a que no están alrededor de 
contenido ni tienen etiquetas de cierre. La etiqueta HAPPY mostrada más arriba es 
una etiqueta HTML normal; comienza con una etiqueta inicial <HAPPY>, rodea 
un contenido y termina con una etiqueta </HAPPY> de cierre. Una etiqueta ASP, 
que comienza con la cadena <% y termina con la cadena %>, es una etiqueta 
delimitada por cadenas. 
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En la siguiente tabla se describen los atributos de TAGSPEC y sus valores posibles: 


Atributo Valor Descripción 


TAG NAME tagName El nombre de la etiqueta personalizada. Obligatorio. 

(Para etiquetas delimitadas por cadenas, TAG NAME 
sólo se utiliza para determinar si un inspector de 
propiedades determinado puede utilizarse para la 
etiqueta en cuestión. Si la primera línea del inspector 
de propiedades contiene este nombre de etiqueta 
con un asterisco a cada lado, entonces el inspector 
podrá utilizarse para las etiquetas de este tipo. Por 
ejemplo, el TAG_NAME (nombre de etiqueta) para el 
código ASP es ASP; un inspector de propiedades que 
pueda examinar el código ASP deberá incluir *ASP* 
en la primera línea. Para obtener información sobre la 
API de inspectores de propiedades, consulte 
"Inspectores de propiedades" en Ampliación de 
Dreamweaver.) 


TAG TYPE* empty o Determina si la etiqueta es en sí misma el contenido 

nonempty (como ocurre con IMG) o si rodea al contenido (como 

ocurre con CODE). Obligatorio para etiquetas 
normales (no delimitadas por cadenas). 


RENDERCONTENTS* TRUE o FALSE Determina si el contenido de la etiqueta debe 

aparecer en la ventana de documento o si debe 
aparecer el icono en su lugar. Obligatorio para 
etiquetas no vacías (nonempty). Sólo afecta a las 
etiquetas que aparecen fuera de los atributos. 


CONTENT MODEL* 


blockjnodel, 
head_model, 
marker_model o 
script_model 


Describe tanto el contenido que puede albergar la 
etiqueta como en qué puede estar contenida la 
etiqueta. Obligatorio. 

block model Especifica que la etiqueta puede 
contener elementos de nivel de bloque (block-level), 
como DIV y P, y que la etiqueta aparece sólo en la 
sección BODY o dentro de otra etiqueta de contenido 
del cuerpo del documento, como DIV, LAYER o TD. 
head model Especifica que la etiqueta puede albergar 
contenido de texto y que sólo puede aparecer en la 
sección HEAD. 

marker model Especifica que la etiqueta puede 
contener cualquier código HTML válido y que puede 
aparecer en cualquier lugar. (Dado que la adición de 
texto fuera de un elemento HEAD válido genera 
código HTML no válido, deberá utilizar head model 
en lugar de marker model si desea incluir una 
etiqueta personalizada que contenga texto en la 
sección HEAD.) 

Utilice marker model para etiquetas que deban 
mostrarse en linea (dentro de un elemento de nivel 
de bloque, como P o DIV) en lugar de provocar un 
salto de línea. 

script model permite que la etiqueta esté presente en 
cualquier lugar entre las etiquetas HTML inicial y de 
cierre de un documento. Cuando Dreamweaver 
encuentra una etiqueta con este modelo, prescinde 
de todo el contenido de la etiqueta. Se utiliza para 
formato de terceros (como determinadas etiquetas 
ColdFusion) que Dreamweaver no debe analizar. 
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Atributo 

Valor 

Descripción 

STARTSTRING 

beginningOfTag 

Especifica un delimitador que marca el comienzo de 
una etiqueta delimitada por cadenas. Las etiquetas 
delimitadas por cadenas pueden aparecer en 
cualquier lugar del documento en el que pueda 
aparecer un comentario. Dreamweaver no lleva a 
cabo ningún análisis de etiquetas ni descodifica 
ninguna entidad o URL entre START STRING y 

END STRING. Obligatorio si se ha especificado 
ENDSTRING. 

ENDSTRING 

endOfTag 

Especifica un delimitador que marca el final de una 
etiqueta delimitada por cadenas. Obligatorio si se ha 
especificado START STRING. 

DETECTINATTRIBUTE 

TRUEo FALSE 

Indica si debe ignorarse todo lo que haya entre 

START STRING y END STRING (o entre las etiquetas 
inicial y de cierre si no se han especificado dichas 
cadenas) incluso cuando estas cadenas aparezcan 
dentro de nombres de atributos o valores. 
Normalmente deberá configurar el valor TRUE para 
etiquetas delimitadas por cadenas; el valor 
predeterminado es FALSE. 

PARSEATTRIBUTES* 

TRUE o FALSE 

Indica si deben analizarse los atributos de la etiqueta. 

Si se configura con el valor TRUE (el valor 
predeterminado), Dreamweaver analizará los 
atributos; si se configura con el valor FALSE, 
Dreamweaver ignorará todo lo que encuentre hasta 
el siguiente paréntesis angular de cierre que aparezca 
fuera de comillas. Por ejemplo, este atributo debería 
configurarse con el valor FALSE para una etiqueta 
como CFIF (como en ccfif a is 1 >). 

ICON 

URL 

Especifica la ruta y el nombre del archivo del icono 
asociado a la etiqueta. Obligatorio para etiquetas 
vacías y para etiquetas no vacías cuyo contenido no 
se muestre en la ventana de documento. 

ICONWIDTH 

widthlnPixels 

Especifica el ancho del icono. 

ICONHEIGHT 

heightlnPixels 

Especifica la altura del icono. 


*Se ignoran las etiquetas que utilizan START_STRING y END STRING 
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Cómo deben aparecer las etiquetas personalizadas en la ventana 
de documento 

El aspecto que presentan las etiquetas personalizadas en la ventana de documento 
depende de los valores de los atributos TAGTYPE y RENDER_CONTENTS de la etiqueta 
TAGSPEC. Si el valor de TAG TYPE es empty, aparecerá el icono especificado en el 
atributo ICON. Si el valor de TAG_TYPE es nonempty pero el valor de 
RENDER_CONTENTS es FALSE, el icono aparecerá como si se tratara de una etiqueta 
vacía. Por ejemplo, la etiqueta HAPPY definida más arriba podría aparecer en el 
código HTML del siguiente modo: 

<P>Este es un párrafo que incluye una etiqueta <CODE>HAPPY</CODE> 
(<HAPPY>Joe</HAPPY>).</P> 

y del siguiente modo en la ventana de documento: 


D happydoc lauocado8/happy.htmll =15= 
jThis is a paragraph that includes an instartce of the 
HflPPV tag ( C ). 


271 x186[a 


En el caso de etiquetas no vacías que tengan para RENDER CONTENTS el valor TRUE, 
entre las etiquetas inicial y de cierre (como el texto existente entre las etiquetas en 
<MYTAG>este es el contenido existente entre las etiquetas inicial y de cierre</MYTAG>) 
aparecerá el contenido en la ventana de documento en lugar del icono. Si Ver > 
Elementos invisibles está activado, el contenido se resaltará mediante el color de 
etiquetas de terceros especificado en las preferencias de Resalto. (Tenga en cuenta 
que el resaltado sólo afecta a las etiquetas definidas en los archivos de base de datos 
de etiquetas.) 

Para cambiar el color de resaltado de etiquetas de terceros: 

1 Elija Edición > Preferencias. 

2 Seleccione Resalto de la lista Categoría. 

3 Haga clic en el cuadro de color Etiquetas de terceros para que aparezca la paleta 
de colores. 

4 Elija un color y haga clic en Aceptar para salir del cuadro de diálogo 
Preferencias. 
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ASP 


ASP (Active Server Pages) de Microsoft es un medio que permite combinar código 
HTML, secuencias de comandos escritas en JavaScript o VBScript y controles 
ActiveX para proporcionar HTML dinámico. Cuando un explorador solicita una 
página ASP de un servidor Web de Microsoft, el servidor interpreta el código ASP 
y envía el código HTML resultante al explorador solicitante. Para obtener más 
información sobre ASP, consulte las páginas ASP overview de Microsoft conforme 
a lo descrito en “Recursos técnicos HTML y Web”, en la página 19. 

Un bloque de código ASP comienza con <% y termina con %>. Si Ver > 
Elementos invisibles está seleccionado, Dreamweaver mostrará un icono ASP en la 
ventana de documento para marcar la ubicación del código ASP. 

JSP 

JSP (JavaServer Pages) de Sun proporciona un medio basado en Java de 
proporcionar de forma dinámica HTML y otros contenidos Web. Cuando un 
explorador solicita una página JSP de un servidor compatible con JSP, el servidor 
interpreta el código JSP y envía el código HTML resultante al explorador 
solicitante. Para obtener más información sobre JSP, consulte la página JSP de Sun 
como se describe en “Recursos técnicos HTML y Web”, en la página 19. 

Un bloque de código ASP comienza con <% y termina con %>. 

PHP 

PHP (siglas de PHP: Hypertext Preprocessor; preprocesador de hipertexto) es un 
lenguaje de secuencia de comandos del lado del servidor. Cuando un explorador 
solicita una página PHP de un servidor compatible con PHP, el servidor interpreta 
el código PHP y envía el código HTML resultante al explorador solicitante. Para 
obtener más información sobre PHP, consulte las páginas PHP como se describe 
en “Recursos técnicos HTML y Web”, en la página 19. 

Un bloque de código PHP comienza con <? y termina con ?>. Si Ver > Elementos 
invisibles está seleccionado, Dreamweaver mostrará un icono PHP en la ventana 
de documento para marcar la ubicación del código PHP. 
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ColdFusion 


ColdFusion™ es otro medio que permite proporcionar páginas de forma 
dinámica. Cuando un explorador solicita una página ColdFusion de un servidor, 
el servidor pasa la página al software ColdFusion Server, que interpreta las 
secuencias de comandos de la página y envía el HTML resultante al explorador 
solicitante. Para obtener más información sobre ColdFusion, consulte la página de 
producto ColdFusion como se describe en “Recursos técnicos HTML y Web”, en 
la página 19. 

Dreamweaver reconoce alrededor de 50 etiquetas de ColdFusion; consulte el 
archivo ColdFusion.xml, incluido en la carpeta Configuration/ThirdPartyTags, 
para obtener más detalles. Si Ver > Elementos invisibles está seleccionado, 
Dreamweaver mostrará un icono de ColdFusion en la ventana de documento para 
marcar la ubicación de las etiquetas ColdFusion para las que RENDER_CONTENTS 
está configurado con el valor FALSE (en ColdFusion.xml). 


Evitar la reescritura de etiquetas de terceros 

Dreamweaver corrije determinados tipos de errores del código HTML; para 
obtener información precisa sobre lo que corrije, consulte “Configurar 
preferencias de reescritura de HTML”, en la página 344. De forma 
predeterminada, Dreamweaver se abstiene de cambiar el código HTML en 
archivos que contienen extensiones de nombre de archivo concretas, como .asp 
(ASP), .cfm (ColdFusion) y .php (PHP). Este valor predeterminado tiene como 
finalidad evitar que Dreamweaver modifique accidentalmente el código contenido 
en alguna de estas etiquetas de terceros. Puede cambiar el comportamiento 
predeterminado de Dreamweaver en lo que a reescritura se refiere para que 
reescriba el código HTML al abrir estos tipos de archivos; asimismo, puede 
agregar otros tipos de archivos a la lista de tipos que Dreamweaver no debe 
reescribir. 

Dreamweaver también codifica determinados caracteres especiales al introducirlos 
en el inspector de propiedades. Generalmente, es recomendable dejar que 
Dreamweaver lleve a cabo esta codificación, ya que aumenta las posibilidades de 
que los caracteres se muestren correctamente en diferentes plataformas y 
exploradores. No obstante, dado que dicha codificación puede interferir con el 
código contenido en etiquetas de terceros, o incluso con las propias etiquetas, 
puede que desee modificar el comportamiento de Dreamweaver en lo que a 
codificación se refiere. 
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Para permitir que Dreamweaver reescriba el código HTML de todos los archivos: 

1 Elija Edición > Preferencias y seleccione la categoría Reescritura de HTML. 

2 Lleve a cabo una de estas operaciones: 

• Elimine una o varias de las extensiones de la lista de extensiones. 

• Anule la selección de Nunca reescribir HMTL: En archivos con extensiones. 

Para agregar los tipos de archivo que Dreamweaver no debe reescribir: 

1 Elija Edición > Preferencias y seleccione la categoría Reescritura de HTML. 

2 Asegúrese de que la opción Nunca reescribir HMTL: En archivos con 
extensiones está seleccionada y agregue las nuevas extensiones de archivo a la 
lista en el cuadro de texto. 

Para desactivar las opciones de codificación de Dreamweaver: 

1 Elija Edición > Preferencias y seleccione la categoría Reescritura de HTML. 

2 Anule la selección de una o de ambas opciones de Caracteres especiales. 

Para obtener información sobre el resto de preferencias de Reescritura de HTML, 
consulte “Configurar preferencias de reescritura de HTML”, en la página 344. 
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APÉNDICE A 

Métodos abreviados 


Menú Archivo 


Acción Windows Macintosh 


Documento nuevo 

Control + Mayús+N 

Comando+N 

Nueva ventana 

Control + N 

n/d 

Abrir un archivo HTML 

Control+0, o arrastre el 
archivo desde el explorador 
o la ventana Sitio hasta la 
ventana de documento. 

Comando+O 

Abrir en marco 

Control + Mayús+O 

Comando+Mayús+O 

Cerrar 

Control+W 

Comando+W 

Guardar 

Control+S 

Comando+S 

Guardar todo 

Control+ Mayús+S 

Comando+Mayús+S 

Salir 

Control+Q 

Comando+Q 
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Menú Edición 


Acción 

Windows 

Macintosh 

Deshacer 

Control+Z 

Comando+Z 

Rehacer 

Control+Y o 

Control+ Mayús+Z 

Comando+Y o 
Comando+Mayús+Z 

Cortar 

Control+X 

Comando+X 

Copiar 

Control+C 

Comando+C 

Pegar 

Control+V 

Comando+V 

Borrar 

Borrar 

Borrar 

Seleccionar todo 

Control+A 

Comando+A 

Iniciar editor externo 

Control+ E 

Comando+E 

Propiedades de la página 

Control+J 

Comando+J 

Preferencias 

Control+ U o 

Control+ K 

Comando+U o Comando+K 

Quick Tag Editor 

Acción 

Windows 

Macintosh 

Abrir Quick Tag Editor 

Control+T 

Comando+T 

Seleccionar etiqueta padre 

Control+ Mayús+6 

Control + Mayús+6 

Seleccionar hijo 

Control+ Mayús+7 

Comando+Mayús+7 
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Paleta de marcador 


Acción 

Windows 

Macintosh 

Abrir la paleta de marcador 

F9 

F9 

Comando Iniciar/detener grabación 

Control+ Mayús+X 

Comando+Mayús+X 

Reproducir comando grabado 

Control+ P 

Comando+P 

Editar texto 

Acción 

Windows 

Macintosh 

Crear un párrafo nuevo 

Entrar 

Retorno 

Insertar un salto de línea 

Mayús+Entrar 

Mayús+Retorno 

Insertar un espacio de no separación 

Control+ Mayús+espacio 

Opción+espacio 

Mover texto o un objeto a otro lugar 
de la página 

Arrastrar el elemento 
seleccionado a la nueva 
ubicación 

Arrastrar el elemento 
seleccionado a la nueva 
ubicación 

Copiar texto o un objeto en otro lugar 
de la página 

Arrastrar el elemento 
seleccionado a la nueva 
ubicación, mientras se pulsa 
la tecla Control 

Arrastrar el elemento 
seleccionado a la nueva 
ubicación, mientras se pulsa 
la tecla Opción 

Copiar sólo texto (no copia etiquetas 
HTML) 

Control + Mayús+C 

Comando+Mayús+C 

Pegar como texto 

Control+ Mayús+V 

Comando+Mayús+V 

Seleccionar una palabra 

Hacer doble clic 

Hacer doble clic 

Agregar elementos seleccionados a 
biblioteca 

Control + Mayús+B 

Comando+Mayús+B 

Cambiar entre la ventana de 
documento y el inspector de HTML 

Control+Tab 

Control+Tab u Opción+Tab 

Abrir y cerrar el inspector de 
propiedades 

Control + Mayús+J 

Comando+Mayús+J 

Ortografía 

Mayús+F7 

Mayús+F7 
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Formatear texto 


Acción 

Windows 

Macintosh 


Sangría 

Control+9 

Comando+9 


Anular sangría 

Control+8 

Comando+8 


Formato > Ninguno 

Control+0 (cero) 

Comando+0 (cero) 


Formato de párrafo 

Control+ Mayús+P 

Comando+Mayús+P 


Aplicar Encabezados 1 a 16 a un 
párrafo 

Control+ 1 a 6 

Comando+1 a 6 


Alineación > Izquierda 

Control+Alt+L 

Comando+Opción + L 


Alineación > Centro 

Control+Alt+C 

Comando+Opción+C 


Alineación > Derecha 

Control+Alt+R 

Comando+Opción + R 


Poner en negrita un texto seleccionado 

Control+ B 

Comando+B 


Poner en cursiva un texto seleccionado 

Control+1 

Comando+I 


Editar hoja de estilos 

Control+ Mayús+E 

Comando+Mayús+E 



Nota: Muchos métodos abreviados de formato de texto no funcionan cuando se trabaja en 
el inspector de HTML. 


Buscar y reemplazar texto 


Acción 

Windows 

Macintosh 

Buscar 

Control + F 

Comando+F 

Buscar siguiente/Buscar de nuevo 

F3 

Comando+G 

Reemplazar 

Control+ H 

Comando+FI 
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Trabajar con tablas 


Acción 

Windows 

Macintosh 

Seleccionar tabla (con el cursor dentro 
de la tabla) 

Control+A 

Comando+A 

Ir a la celda siguiente 

Tab 

Tab 

Ir a la celda anterior 

Mayús+Tab 

Mayús+Tab 

Insertar una fila (antes de la actual) 

Control+ M 

Comando+M 

Agregar una fila al final de la tabla 

Tab en la última celda 

Tab en la última celda 

Eliminar la fila actual 

Control+ Mayús+M 

Comando+Mayús+M 

Insertar una columna 

Control + Mayús+A 

Comando+Mayús+A 

Eliminar una columna 

Control+ Mayús+5 

Comando+Mayús+5 

Combinar celdas seleccionadas de la 
tabla 

Control+Alt+M 

Comando+Opción + M 

Dividir celdas 

Control+Alt+S 

Comando+Opción + S 

Actualizar diseño de tabla (en el modo 
"edición rápida de tabla", obliga a 
redibujar la tabla) 

Control + Espacio 

Comando+Espacio 

Trabajar con marcos 

Acción 

Windows 

Macintosh 

Seleccionar un marco 

Hacer clic en el marco 
mientras se pulsa la tecla Alt 

Mayús+hacer clic en marco 
mientras se pulsa la tecla 
Opción 

Seleccionar siguiente marco o 
conjunto de marcos 

Alt+flecha derecha 

Comando+flecha derecha 

Seleccionar 

marco o conjunto de marcos anterior 

Alt+flecha izquierda 

Comando+flecha izquierda 

Seleccionar conjunto de marcos padre 

Alt+flecha arriba 

Comando+flecha arriba 

Seleccionar primer marco o conjunto 
de marcos hijo 

Alt+flecha abajo 

Comando+flecha abajo 

Agregar un nuevo marco a un 
conjunto de marcos 

Arrastrar el borde del marco 
mientras se pulsa la tecla Alt 

Arrastrar el borde del marco 
mientras se pulsa la tecla 
Opción 

Agregar un nuevo marco a un 
conjunto de marcos mediante el 
método de empujar 

Arrastrar el borde del marco 
mientras se pulsa la tecla Alt 

Arrastrar el borde del marco 
mientras se pulsa la tecla 
Comando+Opción 
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Trabajar con capas 


Acción 

Windows 

Macintosh 

Seleccionar una capa 

Control+ Mayús mientras se 
hace clic 

Comando+Mayús mientras 
se hace clic 

Seleccionar y mover una capa 

Arrastrar mientras se pulsa 
Mayús+Control 

Arrastrar mientras se pulsa 
Comando+Mayús 

Agregar o eliminar una capa de una 
selección 

Hacer clic en la capa 
mientras se pulsa la tecla 
Mayús 

Hacer clic en la capa 
mientras se pulsa la tecla 
Mayús 

Mover capa seleccionada por píxeles 

Teclas de flecha 

Teclas de flecha 

Mover capa seleccionada por 
incremento de ajuste 

Mayús+teclas de flecha 

Mayús+teclas de flecha 

Cambiar el tamaño de una capa 
seleccionada por píxeles 

Control+teclas de flecha 

Opción+teclas de flecha 

Cambiar tamaño de una capa 
seleccionada por incremento de ajuste 

Control + Mayús+teclas de 
flecha 

Opción + Mayús+teclas de 
flecha 

Alinear capas seleccionadas con la 
parte 

Superior/Inferior/Derecha/Izquierda de 
la última capa seleccionada 

Control+teclas de flecha 

Arriba/Abajo/Izquierda/ 

Derecha 

Comando+teclas de flecha 

Arriba/Abajo/Izquierda/ 

Derecha 

Igualar la anchura de las capas 
seleccionadas 

Control + Mayús+9 

Comando+Mayús+9 

Igualar la altura de las capas 
seleccionadas 

Control+ Mayús+8 

Comando+Mayús+8 

Convertir capas en tabla 

Control + Mayús+F6 

Comando+Mayús+F6 

Convertir tablas en capas 

Control+ F6 

Comando+F6 

Activar o desactivar la preferencia de 
anidar al crear una capa 

Arrastrar mientras se pulsa 
la tecla Control 

Arrastrar mientras se pulsa 
la tecla Comando 

Alternar la visualización de la 
cuadrícula 

Control+ Mayús+Alt+G 

Comando+Mayús+ 

Opción+G 

Ajustar a cuadrícula 

Control+Alt+G 

Comando+Opción+G 

Agregar un cuadro clave (línea de 
tiempo) 

Mayús+F9 

Mayús+F9 

Eliminar un cuadro clave (línea de 
tiempo) 

Borrar 

Borrar 
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Trabajar con líneas de tiempo 


Acción 

Windows 

Macintosh 

Agregar un objeto a una línea de 
tiempo 

Control+ Mayús+Alt+T 

Comando+Mayús+ 

Opción+T 

Trabajar con imágenes 

Acción 

Windows 

Macintosh 

Cambiar atributo de origen de imagen 

Hacer doble clic en la 
imagen 

Hacer doble clic en la 
imagen 

Editar la imagen en un editor externo 

Hacer doble clic en la 
imagen mientras se pulsa la 
tecla Control 

Hacer doble clic en la 
imagen mientras se pulsa la 
tecla Comando 


Administrar hipervínculos 


Acción 

Windows 

Macintosh 

Crear hipervínculo (seleccionar texto) 

Control+ L 

Comando+L 

Quitar hipervínculo 

Control+ Mayús+L 

Comando+Mayús+L 

Arrastrar y colocar para crear un 
hipervínculo desde un documento 

Seleccionar el texto, la 
imagen o el objeto, luego 
arrastrar la selección, 
mientras se pulsa la tecla 
Mayús, a un archivo de la 
ventana Sitio 

Seleccionar el texto, la 
imagen o el objeto, luego 
arrastrar la selección, 
mientras se pulsa la tecla 
Mayús, a un archivo de la 
ventana Sitio 

Arrastrar y soltar para crear un 
hipervínculo usando el inspector de 
propiedades 

Seleccionar el texto, la 
imagen o el objeto, luego 
arrastrar el icono de 
señalización de archivo en el 
inspector de propiedades a 
un archivo de la ventana 

Sitio 

Seleccionar el texto, la 
imagen o el objeto, luego 
arrastrar el icono de 
señalización de archivo en el 
inspector de propiedades a 
un archivo de la ventana 

Sitio 

Abrir el documento vinculado en 
Dreamweaver 

Hacer doble clic 

en el vínculo mientras se 

pulsa la tecla Control 

Hacer doble clic 

en el vínculo mientras se 

pulsa la tecla Comando 

Comprobar vínculos seleccionados 

Mayús+F8 

Mayús+F8 

Comprobar vínculos de todo el sitio 

Control+ F8 

Comando+F8 
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Establecer destino y obtener vista previa en 
exploradores 


Acción 

Windows 

Macintosh 

Vista previa en explorador principal 

F12 

F12 

Vista previa en explorador secundario 

Control + F12 

Comando+F12 

Administración de sitio y FTP 

Acción 

Windows 

Macintosh 

Crear archivo nuevo 

Control + Mayús+N 

Comando+Mayús+N 

Crear carpeta nueva 

Control+ Mayús+Alt+N 

Comando+Mayús+ 

Opción + N 

Abrir selección 

Control+ Mayús+Alt+0 

Comando+Mayús+ 

Opción+O 

Obtener carpetas o archivos 
seleccionados desde un sitio FTP 
remoto 

Pulsar Control + Mayús+D, o 
arrastrar los archivos desde 
el panel Remoto hasta el 
panel Local en la ventana 
Sitio 

Pulsar Comando+Mayús+D, 
o arrastrar los archivos desde 
el panel Remoto hasta el 
panel Local en la ventana 

Sitio 

Colocar carpetas o archivos 
seleccionados en un sitio FTP remoto 

Pulsar Control + Mayús+U, o 
arrastrar los archivos desde 
el panel Local hasta el panel 
Remoto en la ventana Sitio 

Pulsar Comando+Mayús+U, 
o arrastrar los archivos desde 
el panel Local hasta el panel 
Remoto en la ventana Sitio 

Proteger 

Control + Mayús+Alt+D 

Comando+Mayús+ 

Opción + D 

Desproteger 

Control + Mayús+Alt+U 

Comando+Mayús+ 

Opción + U 

Desconectar 

Control + Mayús+Alt+F5 

Comando+Mayús+ 

Opción + F5 

Mapa del sitio 

Control + F5 

Comando+F5 

Actualizar sitio remoto 

Alt + F5 

Opción + F5 
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Mapa del sitio 


Acción 

Windows 

Macintosh 

Ver archivos del sitio 

F5 

F5 

Actualizar panel Local 

Mayús+F5 

Mayús+F5 

Crear raíz 

Control+ Mayús+R 

Comando-l-Mayús+R 

Vincular a archivo existente 

Control+ Mayús+K 

Comando-l-Mayús+K 

Cambiar vínculo 

Control+ L 

Comando+L 

Quitar vínculo 

Tecla Supr 

Tecla Supr 

Mostrar/ocultar vínculo 

Control+ Mayús+Y 

Comando-l-Mayús+Y 

Mostrar títulos de páginas 

Control -t-Mayús+T 

Comando-l-Mayús+T 

Cambiar nombre de archivo 

F2 

n/d 

Acercar mapa del sitio 

Control+ + (más) 

Comando-M- (más) 

Alejar mapa del sitio 

Control + - (menos) 

Comando-l- - (menos) 

Reproducir plug-ins 

Acción 

Windows 

Macintosh 

Reproducir plug-in 

Control+Al t+P 

Comando+Opción + P 

Detener plug-in 

Control -l-Alt+X 

Comando+Opción+X 

Reproducir todos los plug-ins 

Control+ Mayús+Alt+P 

Co ma n d o+M ay ú s+ 

Opción + P 

Detener todos los plug-ins 

Control-t-Mayús+Alt+X 

Co ma n d o+M ay ú s+ 

Opción+X 

Ver elementos de 

página 


Para mostrar u ocultar 

Windows 

Macintosh 

Elementos invisibles 

Control+ Mayús-H 

Comando+Mayús+I 

Reglas 

Control+ Mayús+Alt+R 

Comando+Mayús+ 

Opción + R 

Cuadrícula 

Control + Mayús+Alt+G 

Comando+Mayús+ 

Opción+G 

Ver contenido de Head (encabezado) 

Control-t-Mayús+W 

Comando-l-Mayús+W 
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Trabajar con plantillas 


Acción 

Windows 

Macintosh 

Crear nueva región editable 

Control+Alt+V 

Comando+Opción+V 

Marcar región como editable 

Control+Alt+W 

Comando+Opción+W 


Insertar objetos 


Para insertar 

Windows 

Macintosh 

Cualquier objeto (imagen, película 
Shockwave, etc.) 

Arrastrar el archivo desde el 
explorador o la ventana Sitio 
hasta la ventana de 
documento 

Arrastrar el archivo desde el 
Finder o la ventana Sitio 
hasta la ventana de 
documento. 

Imagen 

Control+Alt+I 

Comando+Opción + I 

Tabla 

Control+Alt+T 

Comando+Opción+T 

Película Flash 

Control+Alt+F 

Comando+Opción + F 

Película Shockwave Director 

Control+Alt+D 

Comando+Opción + D 

Punto de fijación con nombre 

Control+Alt+A 

Comando+Opción+A 
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Abrir y cerrar paletas 


Para mostrar u ocultar 

Windows 

Macintosh 


Objetos 

Control + F2 

Comando+F2 


Propiedades 

Control+ F3 

Comando+F3 


Lanzador 

Mayús+F4 

Mayús+F4 


Ver archivos del sitio 

F5 

F5 


Ver mapa del sitio 

Control + F5 

Comando+F5 


Biblioteca 

F6 

F6 


Estilos CSS 

F7 

F7 


Estilos HTML 

Control+ F7 

Comando+F7 


Comportamientos 

F8 

F8 


Marcador 

F9 

F9 


Fuente HTML 

FIO 

FIO 


Capas 

F11 

F11 


Línea de tiempo 

Control+ F9 

Comando+F9 


Marcos 

Control + FIO 

Comando+FIO 


Plantillas 

Control + F11 

Comando+F11 


Mostrar/ocultar ventanas flotantes 

F4 

F4 


Cerrar ventana de documento 

Control + F4 o Control+W 

Comando+W 


Obtener ayuda 

Acción 

Windows 

Macintosh 


Temas de Ayuda del Usando 
Dreamweaver 

F1 

F1 


Temas de Ayuda de Ampliación de 
Dreamweaver 

Mayús+F1 

Mayús+FI 


Dreamweaver en línea 

Control + F1 

Comando+FI 
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Matriz de métodos abreviados 


Nota: El asterisco (*) indica una combinación de teclas no utilizada. Los comandos en 
cursiva son de nivel del sistema. 


Carácter del 
teclado 

Control (Windows) o 
Comando (Macintosh) 

Control + Mayús 
(Windows) o 
Comando+Mayús 
(Macintosh) 

Control + Alt 

(Windows) o Comando+ 
Opción (Macintosh) 

Control+ Mayús+Alt 
(Windows) o Comando + 
Mayús+ Opción 
(Macintosh) 

A 

Seleccionar todo, 

Seleccionar tabla 

Insertar columna de 
tabla 

Insertar punto de fijación 
con nombre 

* 

B 

Negrita (activar/ 
desactivar) 

Agregar a biblioteca 

* 

* 

C 

Copiar 

Copiar sólo texto 

Centrar 

* 

D 

Duplicar 

Obtener archivos o 
carpetas seleccionadas 

Insertar película 

Shockwave Director 

Proteger archivos o 
carpetas seleccionadas 

E 

Iniciar editor externo 

Editar hoja de estilos 

* 

* 

F 

Buscar 

* 

Insertar película Flash 

* 

G 

Buscar de nuevo (sólo 
Macintosh) 

* 

Ajustar a cuadrícula 
(activar/desactivar) 

Mostrar/ocultar 

cuadrículas 

H 

Reemplazar 

Traer al frente 

Mover hacia atrás 

Enviar al fondo 

1 

Cursiva (activar/ 
desactivar) 

Mostrar invisibles 
(activar/desactivar) 

Insertar imagen 

* 

J 

Propiedades de la 
página 

Inspector de 
propiedades (activar/ 
desactivar) 

* 

* 

K 

Preferencias 

Vincular a archivo 
existente 

* 

* 

L 

Crear vínculo 

Quitar vínculo 

Justificación izquierda 

* 

M 

Insertar fila de tabla 

Borrar fila de tabla 

Combinar celdas 
seleccionadas de la tabla 

* 

N 

Nueva ventana 
(Windows) 

Nueva página 
(Macintosh) 

Nueva página (sólo 
Windows) 

* 

Nueva carpeta de sitio 

0 

Abrir 

Abrir en marco 

* 

Abrir archivo de sitio 
seleccionado 

p 

Reproducir comando 
grabado 

Formato de párrafo 

Reproducir plug-in 

Reproducir todos los plug- 
ins 

Q 

Salir 

* 

* 

* 

R 

Importar 

Crear raíz 

Justificación derecha 

Mostrar/ocultar reglas 

S 

Guardar 

Guardar todo 

Dividir celdas 

* 
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Carácter del 
teclado 

Control (Windows) o 
Comando (Macintosh) 

Control + Mayús 
(Windows) o 
Comando+Mayús 
(Macintosh) 

Control + Alt 

(Windows) o Comando+ 
Opción (Macintosh) 

Control + Mayús+AIt 
(Windows) o Comando + 
Mayús+ Opción 
(Macintosh) 

T 

Quick Tag Editor 

Mostrar títulos de 
páginas en el mapa del 
sitio 

Insertar tabla 

Agregar un objeto a una 
línea de tiempo 

U 

Preferencias 

Colocar archivos o 
carpetas seleccionadas 

* 

Desproteger archivos o 
carpetas seleccionadas 

V 

Pegar 

Pegar como texto 

Crear nueva región 
editable 

* 

w 

Cerrar 

Ver contenido de Head 
(encabezado) 

Marcar región como 
editable 

* 

X 

Cortar 

Comando Iniciar 
grabación 

Detener plug-in 

Detener todos los plug-ins 

Y 

Rehacer 

Mostrar/ocultar vínculo 

* 

* 

z 

Deshacer 

Rehacer 

* 

* 

0 (cero) 

Definir formato de 
párrafo como Ninguno 

* 

* 

* 

1 

Aplicar Encabezado 1 al 
párrafo 

* 

* 

* 

2 

Aplicar Encabezado 2 al 
párrafo 

* 

* 

* 

3 

Aplicar Encabezado 3 al 
párrafo 

* 

* 

* 

4 

Aplicar Encabezado 4 al 
párrafo 

* 

* 

* 

5 

Aplicar Encabezado 5 al 
párrafo 

* 

* 

* 

6 

Aplicar Encabezado 6 al 
párrafo 

* 

* 

* 

7 

* 

* 

* 

* 

8 

* 

* 

* 

* 

9 

* 

* 

* 

* 

- (menos) y 
_ (subrayado) 

Alejar mapa del sitio 

Borrar columna de tabla 

* 

* 

= y + 

Ajustar a ventana 

Acercar mapa del sitio 

* 

* 

8 y { 

Anular sangría (mover 
hacia atrás) 

Reducir tamaño de 
columna (tablas), 

Asignar mismo ancho a 
capas (capas) 

* 

* 
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Carácter del 
teclado 

Control (Windows) o 
Comando (Macintosh) 

Control + Mayús 
(Windows) o 
Comando+Mayús 
(Macintosh) 

Control + Alt 

(Windows) o Comando+ 
Opción (Macintosh) 

Control + Mayús+Alt 
(Windows) o Comando + 
Mayús+ Opción 
(Macintosh) 

8 y} 

Sangría (mover hacia 
delante) 

Aumentar tamaño de 
columna (tablas), 
Asignar mismo alto a 
capas (capas) 

* 

* 

. (punto) y > 

Detener plug-in 

Seleccionar hijo 

* 


, (coma) 

y < 

* 

Seleccionar etiqueta 
padre 

* 

* 

?y/ 

* 

* 

* 

* 

; y: 

* 

* 

* 

* 

' y" 

* 

* 

* 

* 

' y ~ 

* 

* 

* 

* 

\y| 

* 

* 

* 

* 

Barra espaciadora 

Actualizar diseño de 
tabla 

Insertar espacio de no 
separación (Windows) 
(Opción + 

barra espaciadora en 
Macintosh) 

* 

* 
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Tecla de 
función 

Sin 

modificador 

Mayús 

Alt 

(Windows) u 

Opción 

(Macintosh) 

Control 
(Windows) o 
Comando 
(Macintosh) 

Control + 

Mayús 

(Windows) o 

Comando+ 

Mayús 

(Macintosh) 

Control + 

Alt 

(Windows) o 
Comando+ 
Opción 
(Macintosh) 

Control + 
Mayús+AIt 
(Windows) o 
Comando+ 
Mayús+ 

Opción 

(Macintosh) 

F1 

Ayuda del 

Usando 

Dreamweaver 

Ayuda de 
Ampliación de 
Dreamweaver 

* 

Dreamweaver 
en línea 

* 

* 

* 

F2 

Cambiar 
nombre de 
archivo en el 
mapa del sitio 
(sólo 

Windows) 

* 

* 

Paleta de 
objetos 

* 

* 

* 

F3 

Buscar de 
nuevo (sólo 
Windows) 

* 

* 

Inspector de 
propiedades 

* 

* 

* 

F4 

Ocultar/ 

mostrar 

ventanas 

flotantes 

Lanzador 

Salir (sólo 
Windows) 

Cerrar ventana 




F5 

Archivos del 
sitio 

Actualizar 
panel Local 

Actualizar 
panel Remoto 

Mapa del sitio 

* 

* 

Desconectar 
de sitio 
remoto 

F6 

Paleta de 
bibliotecas 

* 

* 

Convertirtablas 
en capas 

Convertir 
capas 
en tabla 

* 

* 

F7 

Estilos CSS 

Ortografía 

* 

Estilos HTML 

* 

* 

* 

F8 

Comportamie 

nto 

Comprobar 
vínculos - 
seleccionados 


Comprobar 
vínculos - 
Todo el sitio 

* 

* 

* 

F9 

Paleta de 
marcador 

Agregar 
cuadro clave 

* 

Línea de 
tiempo 

* 

* 

* 

FIO 

Inspector de 
código fuente 
de HTML 

* 

* 

Inspector de 
marcos 

* 

* 

* 

F11 

Capas 

* 

* 

Paleta de 
plantillas 

* 

* 

* 

F12 

Vista previa en 

explorador 

principal 

* 

* 

Vista previa en 

explorador 

secundario 

* 

* 

* 
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INDICE 


A 

abrir 

documentos 86 

tipos de archivos distintos de HTML de forma 
predeterminada 390 
Abrir (icono de carpeta), opción 377 
Abrir hoja de estilos, icono 190 
Abrir página vinculada, comando 136 
Abrir plantilla adjunta, comando 367 
Abrir ventana del explorador, acción 318 
Acceso al servidor, opciones 141 
acciones 

cambiar en comportamientos 304 
compatibilidad con exploradores 306 
controlar líneas de tiempo 263 
crear 305 
definidos 297 

elegir en el inspector de comportamientos 302 
incluidas con Dreamweaver 306 
Consulte también acciones individuales por 
nombre 

Active Server Pages (ASP) 

etiquetas, personalizar análisis, apariencia 404 
introducción 409 

Actualizar lista archivos locales autom., opción 79 
Actualizar página actual, comando 367 
Actualizar páginas, comando 368 
Actualizar páginas, opción (paleta de bibliotecas) 377 
actualizar vínculos 134 
Actualizar, propiedad de imagen 202 
Advertir al solucionar/eliminar etiquetas, opción 345 
Agregar a página, opción (paleta de bibliotecas) 377 
Agregar marco, comando 255 
agregar marcos a línea de tiempo 258 
Agregar objeto a Biblioteca, comando 371 
Agregar objeto a línea de tiempo, comando 255 
agregar un objeto a una línea de tiempo 256 
Agregar/Quitar reparación de cambio de tamaño de 
Netscape, comando 239 
Ajustar posición, comando 106 


Ajuste automático, opción 346 
Ajuste, opción 337 

Al crear estilos, Forma abreviada para, opción 194 
Al editar estilos, Forma abreviada para, opción 194 
alinear 

capas 246 

elementos de página 203 
imagen de rastreo 106 
opciones 203 
texto 182 

Alinear con selección, comando 106 

Alinear, propiedad de imagen 201 

Alt, propiedad de imagen 201 

Ampliación de Dreamweaver y páginas de Ayuda 13 

An y Al, propiedades de imagen 201 

anidar 

capas 238 
marcos 268 

Anidar al crear en una capa, opción 239 
animaciones 

aplicar a objetos 261 
con rutas completas 257 
copiar y pegar 260 
crear 255 
introducción 106 
líneas de tiempo 253 
mejorar 262 

Anular may/min de, opción 347 
Aplicación automática, opción (paleta de estilos 
HTML) 185 

aplicaciones, utilizar con Dreamweaver 74 
aplicar formato a código fuente HTML 
personalizar 397 
preferencias 344 

Aplicar formato de origen, comando 349 
Aplicar formato de origen, opción 351 
Aplicar plantilla a página, comando 366 
applets Consulte Applets de Java 
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applets de Java 

cambiar tamaño 203 
insertar 281, 294 
introducción 294 
propiedades 294 
archivos 

administrar 144 

buscar 156 

cargar 153 

colocar 153 

descargar 151 

desproteger y proteger 148 

obtener 151 

sincronizar sitios locales y remotos 154 
tipos predeterminados 390 
transferir con FTP 141 
ver en la ventana Sitio 84 
archivos dependientes 
colocar 153 
mostrar y ocultar 132 
obtener 152 

Archivos locales, opción 83 

archivos ocultos, mostrar y ocultar 132 

Archivos remotos, opción 83 

área de trabajo 63 

Arrastrar capa, acción 312 

ASP 

editar 353 

ASP. Consulte Active Server Pages 
aspectos básicos de Dreamweaver 14 
atributos 

buscar 159 

en perfiles de exploradores 399 
Consulte tambiéti etiquetas 
automatizar tareas 99 
Ayuda 11 

métodos abreviados 423 


barra de estado 

definir texto (comportamiento) 325 
introducción 66 
preferencias 68 

Tamaño de ventana, menú emergente 66 


barra de exploración 

agregar imágenes a 125 
crear 124 

estados de imagen 124 
insertar en una tabla 126 
modificar elementos 127 
mostrar horizontalmente en una página 126 
mostrar verticalmente en una página 126 
Barra de exploración, comando 209 
basados en texto, editores HTML. Consulte editores 
externos 

BBEdit (Macintosh) 353 
bibliotecas 

abrir elementos 377 
agregar elementos a páginas 372, 377 
cambiar color de resaltado para elementos 372 
convertir elementos en editables en documentos 
374 

crear elementos 371 

editar comportamientos en elementos 375 
editar elementos 373 
eliminar elementos 374 
introducción 370 
preferencias 372 
propiedades de elemento 376 
BLOCKQUOTE, etiqueta 182 
BODY, etiqueta 107 
borde de tabla 
ancho 224 
colores 224 

Borde, propiedad de imagen 202 
bordes 

agregar a una tabla 222 
eliminar 216 
en un marco 277 
Borrador, botón 92 

Borrar estilo de la selección, opción 185 
Borrar estilo del párrafo, opción 185 
Borrar, comando (paleta de bibliotecas) 377 
Bucle, opción 253 
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buscar 

archivos 156 

etiquetas y atributos HTML 159 
expresiones regulares 162 
guardar modelos de búsqueda 161 
métodos abreviados 416 
texto en archivos 157 
texto en código fuente HTML 158 
texto entre etiquetas específicas 160 
Buscar en, opción 157 
buscar y reemplazar. Consulte buscar 
Buscar, Ayuda 12 
Buscar, opción 157 

c 

cabezal de reproducción 253 
Caché, opción 79 

Cambiar nombre, opción (paleta de bibliotecas) 377 
Cambiar propiedad, acción 308 
cambiar tamaño 
capas 245 
celdas de tabla 228 
elementos de página 203 
marcos 276 

Cambiar vínculo en todo el sitio, comando 135 
campos de texto, definir texto con comportamientos 
326 

canal de comportamientos (Behaviors) en líneas de 
tiempo 253 
capacidad de ampliación 

comportamientos de terceros 305 
introducción 403 
JavaScript 403 


capas 

activar 243 

ajustar a cuadrícula 246 
alinear 246 
anidar 238 

cambiar orden de apilamiento 248 
cambiar tamaño 245 

cambiar visibilidad con comportamientos 327 
cambiar visibilidad con la paleta de capas 249 
convertir en tablas 250 
convertir para exploradores 3.0 252 
crear 236 
desplazables 315 
dibujar varias 237 
en diseño de tablas 250 
evitar solapamiento 251 
insertar 236 
introducción 235 
manipular 243 
marcas, ver 237 
métodos abreviados 418 
mover 246 
preferencias 239 
propiedades 239 
propiedades para múltiples 242 
puntos de fijación 92 
seleccionar 244 
seleccionar múltiples 242 
situar 239 
visibilidad 249 
caracteres especiales 89 
insertar 90 
introducción 89 

Caracteres especiales, opciones (preferencias de 
Reescritura de HTML) 345 
Carga previa de imágenes, acción 321 
Carga previa de imágenes, opción 208 
cargar archivos 153 
Cargar consulta, botón 161 
carpeta raíz 

local 79 
remota 142 
carpeta raíz local 79 
Carpeta raíz local, campo 79 
carpetas 

buscar 156 
raíz 79 
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celdas Consulte celdas de tabla 

celdas de encabezado, aplicar formato 225 

celdas de tabla 

aplicar formato 224 

celdas de encabezado, designar 225 

color de fondo, agregar 225 

combinar 231 

Consulte tambiéti tablas 

copiar y pegar 226 

dividir 231 

imagen de fondo, agregar 225 
Centrado, opción 347 

Centro de servicio técnico de Dreamweaver 13 
CFML 

editar etiquetas CFML 353 
CFML. Consulte ColdFusion Markup Language 
CGI, secuencias de comandos 385 
CLASS, atributo 191 
codificación 73 
código fuente HTML 

aplicar formato en documentos existentes 349 
buscar 157, 158 
buscar etiquetas 159 

configurar preferencias de aplicación de formato 
345 

conversión de atributos CSS 196 

corregir etiquetas no válidas 351 

de Fireworks 209 

editar con BBEdit 353 

editar en la ventana de documento 338 

eliminar etiquetas 343 

estilos de etiquetas 188 

introducción a la edición de 335 

introducción a preferencias de formato 344 

limpiar 348 

limpiar HTML de MS Word 350 
material de referencia 19 
menús emergentes de sugerencias 343 
perfil de formato 397 
preferencias de colores de etiquetas 347 
preferencias de reescritura 344 
seleccionar en la ventana de documento 91 
ver con el inspector de código fuente HTML 73 
Coincidir mayúsculas y minúsculas, opción 158 
colaboración con otros usuarios 148 


ColdFusion Markup Language (CFML) 

etiquetas, personalizar análisis, apariencia 404 
introducción 410 
y Dreamweaver 336 

colocar archivos en un servidor remoto 153 
Colocar archivos más nuevos en remoto, opción 155 
Colocar, comando 153 
color 

cuentagotas, uso 92 
elegir 92 

fondo de marco 278 
fondo de página 96 

predeterminado para texto de página 96 
seguro para la Web 94 
texto, cambiar 181 
Color de los vínculos, opción 96 
Color del texto, opción 96, 183 
Color, comando 181 
columnas, filas y celdas 

agregar y eliminar 230 
aplicar formato 224 
color de fondo, agregar 225 
comandos 

acceso desde menú contextual 72 
cambiar nombre 395 
crear a partir de pasos de marcador 102 
grabar 103 

Comandos, menú, editar 391 
Combinación de fuentes, opción 183 
Combinar celdas, comando 231 
Combinar etiquetas de anidadas cuando sea posible, 
opción 349 

combinar paletas flotantes 64 
comentarios, insertar 356 
Comentarios, opción (Colores HTML) 347 
comenzar 14 

Common Gateway Interface (CGI), secuencias de 
comandos 385 
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comportamientos 
adjuntar 302 
cambiar 304 

compatibilidad con exploradores 306 

crear acciones 305 

de terceros 305 

definidos 297 

desencadenar 302 

e imágenes 213 

eliminar 304 

y elementos de biblioteca 375 
y formularios 385 
y líneas de tiempo 303 
y medios 296 
y plantillas 365 

Comprobar explorador, acción 309 

Comprobar exploradores de destino, comando 166 

Comprobar plug-in, acción 310 

comprobar sitios 166 

comprobar vínculos 168 

Configuration, carpeta 

Behaviors, subcarpeta 396 
BrowserProfiles, subcarpeta 399 
Commands, subcarpeta 396 
Extensions.txt, archivo 390 
menus.xml, archivo 391 
Objects, subcarpeta 388 
SourceFormat.txt, archivo 397 
ThirdPartyTags, subcarpeta 404 
conjuntos de marcos 
anidados 268 
asignar nombre 272 
bordes 277 

establecer destino de vínculos en 115 
guardar archivos en 270 
predefinidos, insertar 267 
propiedades 274 
seleccionar 268 
Consulte también marcos 
conocer Dreamweaver 14 
contenido, agregar a tablas 217 
Contenido, Ayuda 12 
Controlar Shockwave o Flash, acción 312 


controles ActiveX 

cambiar tamaño 203 
insertar 281 
introducción 292 
propiedades 293 
controles deslizantes, crear 312 
convenciones 15 
convenciones tipográficas 15 
Convertir capas en tabla, comando 250 
Convertir tablas en capas, comando 252 
copiar pasos de marcador 101 
Correcciones de HTML, archivo de registro 350 
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